How to Create a Simple HTML Document on Notepad

Spread the love

Hey, are you the beginner in Website development or you are starting to learn how to create a Static website in a simple notepad Text editor. You need to learn the basics of HTML. In this post, you will learn everything about the basics of HTML documents. Before creating an HTML document you need to download an HTML editor software. I recommend you to download Notepad++

Notepad++ is a very powerful tool for Writing HTML codes. Because you are a beginner then it will help you with writing code. There are many plugins and add-ons available on Notepad++ so you can install them with your Requirements.

HTML Basics:

  • <!DOCTYPE html> = This is the Declaration type of Your document.
  • <html></html> = The HTML documents begins with <html> and ends with </html> tags.
  • <body></body> = Here is the visiple part of Documents between <body> and </body>

Check out the Following code

<!DOCTYPE html>
<html>
<body>
<h1>My Website Heading</h1>
<p>This is the Paragraph</p>
</body>
</html>

The Result of this code will be looks like the following screenshot. HTML Headings:

There is the 6 (Six) type of heading available for HTML documents. These <h1> to <h6>

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

If you want to create a Paragraph on your HTML document then you need to write <p> tag of your HTML document. See the below code.

<p>This is the First paragraph.</p>
<p>This is the Second paragraph.</p>

Creating a Link to HTML: If you wish to create a Link on your HTML document then you need to write <a href=”yourlink”> code in your HTML document. See the below code.

<a href="http://www.probweb.com">This is the link</a>

Adding an Image to HTML document: If you have an Image and want to add it to your HTML document then you need to add the following code.

<img src="anchor-image.jpg" alt="Anchor Image" width="700" height="400">

In this code, you can see the width and height of your Image. You can change the width and height of your image on this code. After adding all of the code on a single HTML document your page will be looks like the following screenshot.

HTML

In the Next post, we will learn the CSS stylesheet for this HTML document.

Arvind Singh is a Web Developer / Blogger and Also a Youtuber. He Explores what’s possible with WordPress, Blogger, Mobile Phones, Web Development and shares his Knowledge with the Readers.

You May Also Like