How to create a website using HTML on notepad

A website is simply a collection of web-pages. These web-pages are written in a specialized language called Hyper Text Markup Language (HTML)Currently HTML5 is the version of HTML being used to create web-pages and websites. HTML5 in conjunction with CSS and JavaScript can be used to create vivid and beautiful websites. But for beginner purposes, we will only stick to HTML and only a little CSS. 

A web-page written in HTML can be easily viewed in a web browser.  

First and foremost, creating a website in HTML basically requires a code editor. There are many code editors available for all platforms but for the purpose of simplicity for beginners, we are going to use an in-built text editor of Windows called Notepad. For Mac and Linux users, you can use your respective default text editors of your operating system, it will work just the same.  


STEP 1: The first step is to open Notepad. 

Windows 8 or later: 

Open the Start Screen and Search (Type Notepad) 

Windows 7 or previous Windows: 

Open Start > Programs > Accessories > Notepad 

Or you can also right click on desktop and create a new text document. 

Opening notepad automatically creates a new document for us. 


STEP 2: This is the main step. Write some HTML code and create whatever website or web-page you desire by writing your code in notepad. If you are a complete beginner and don’t know how to write HTML code then here is a sample code for you. 

<!DOCTYPE html> 
<html> 
<body> 
<h1>HELLO MY NAME IS ...</h1> 
<p>WELCOME TO <strong>EXPLORING BITS</strong></p> 
</body> 
</html>

 

Let me tell you briefly what this code means and what it does. 

  1. The <!DOCTYPE html> tells the browser that we have written the code in HTML5. 
  1. <html> is called an opening tag and marks the start of the HTML code. </html> is called a closing tag and marks the end of the HTML code. 
  1. <body> tag marks the opening of the body of the code. Everything written here is responsible for what is visible on the website. </body> tag closes off the body of the HTML code. 
  1. <h1>…</h1> tag means a heading tag. Everything written inside this tag appears bold with a big font size on the web-page signifying a heading. 
  1. <p>…</p> tag means a paragraph tag and everything written inside it is considered a paragraph. 
  1. <strong>…</strong> tag is used to highlight any word or line in a paragraph. Anything inside this tag is turned to bold. 
  1. <span>…</span> which is used later in this tutorial is used to envelop the part of a bigger tag to which we want to apply a different type of style. For example, if we have a sentence which is red in color and we only want to change the color of only a single word then we will put that word inside <span> and then we can add any style to that <span> tag. 

STEP 3: Now we will add some CSS to this website to make it look a little better. There are three ways to add style using CSS to a website. First is by using a concept called in-line CSS. In this method, we add the CSS code in the html file. This is the easiest method and we will be using this method. The second method is to create a <style>…</style> tag above the <body> and inside <head>…</head> and writing the CSS code there (INTERNAL CSS). The third is to create a second file and add CSS code to it and then adding the relative path of the file to the html file (EXTERNAL CSS).  

Here is the HTML code with inline CSS styles added to it. 

<!DOCTYPE html> 
<html> 
<body style="text-align: center;"> 
<h1 style="color: teal;">HELLO MY NAME IS ...</h1> 
<p style="color: red;">WELCOME TO <strong style="color: blue;">EXPLORING BITS</strong></p> 
</body> 
</html>

 

In case of internal CSS, the above html code will change like this: 

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
body {text-align: center;} 
h1 {color: teal;} 
p {color: red;} 
span {font-weight: bold;  
       color: blue;} 
</style> 
</head> 
<body> 
<h1>HELLO MY NAME IS ...</h1> 
<p>WELCOME TO <span>EXPLORING BITS</span></p> 
</body> 
</html>

 

The final way to add CSS is by creating a new notepad file by the name of styles and save it with the extension ‘.css’ (styles.css, refer to step 5 to see how to do this). Add the following code to the css file: 

body { 
      text-align: center; 
} 
h1 { 
      color: teal; 
} 
p { 
      color: red;  
} 
span { 
      font-weight: bold; 
      color: blue;  
}

 

As you can see above, the contents of internal CSS are just transferred to a new file. Now we just need to add the relative path of styles.css using <link> tag and everything will work as intended. 

 <!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>HELLO MY NAME IS ...</h1> 
<p>WELCOME TO <span>EXPLORING BITS</span></p> 
</body> 
</html>

STEP 4: The next step is to add some simple JavaScript to the website to make it even better. JavaScript can also be added using the same three ways as CSS but here we will use the third way i.e., using external JavaScript file. So, create a new Notepad file and name it as ‘index’ and save it with the extension ‘.js’ so it looks like ‘index.js’ (Refer to step 5 for step-by-step explanation). Now add the following code to this file.  

function createRGB () { 
 
  var p = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"; 
  var target = document.body; 
  target.style.backgroundColor = p; 
  target.style.transition = "all 0.3s ease"; 
 
}

 

In the above code, we have taken a variable p and we have stored a string in it which randomly takes an integer between 0 and 255 which is used to generate a random color code. The format of color codes used in HTML5 is “rgb(x, y, z)” where x, y and z are random numbers between 0 and 255. A simple animation “ease” with a 0.3 s timer is also added to ensure a smooth transition between two colors. 

Now we will add a button in HTML to randomly change background color when clicked. 

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>HELLO MY NAME IS ...</h1> 
<p>WELCOME TO <span>EXPLORING BITS</span></p> 
<button onclick="createRGB()">CLICK</button> 
<script src="index.js"></script> 
</body> 
</html>

The external CSS file will remain the same. 


STEP 5The final step is to save the Notepad file as HTML so we can view it in the browser. This is done by going to Notepad Menu: File > Save 

From the SAVE AS TYPE dropdown, select ‘All Files (*)’. Give the file name anything you want and add ‘.html’ at the end of the file name and click the ‘Save’ button. In the case of CSS or JavaScript, replace ‘.html’ with ‘.css’ or ‘.js’. Now your HTML file will be saved and you can open it in any browser of your desire by double clicking on it. 

This is what this website would look like. 


 

Leave a Comment