Notepad can be a very useful text editor, when it comes to creating websites and with its simple framework, it is a really helpful tool to have in your arsenal, if you are a beginner. In this article, we are going to cover basic steps on how we can create a website on Notepad.
Making your first page with heading and body text
To open Notepad on your laptop, if you are on a Windows system, operating on Windows 7 or earlier, you will be directed through Start>Programs>Accessories>Notepad. Alternatively, you can just search for Notepad and find it there.
If you are operating on a Mac, go through TextEdit and ensure that the text editor is set to plain text. You can do this by going to Preferences>New Document> Select Plain Text. On a Mac, you will have to check “Display html file as HTML Code” under Open and Save.
For your first page on Notepad, you can type in the following on your Text Editor:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph. </p>
</body>
</html>
It’s going to look something like this on Notepad:
Step 2
This is an important step to remember, because you can’t save the file as a regular extension. You have to remember to add “.html” to the end of the file name, OR it will not be saved.
The encoding should be to UTF-8 which is the preferred encoding for HTML files. ANSI coding is only for the US and the European characters.
This is what the file extension is going to look like:
STEP 3
Here, you are going to the folder where you have saved the file and open it on your browser. Its not essential that you keep a particular browser to open the file. We will recommend using Chrome, but any modern browser should do the job.
If you do have any trouble opening the file, then go back to the second step and see how you have saved your file and whether you have put the proper extension.
When the file is opened on your browser, it is going to look something like this:
Notice the file path on the URL Bar. That is the full path to the file on your computer.
file:///C:/Users/Sahil%20Raina/Desktop/filename.html
Step 4- Aligning the Text
This is an important aspect of making a website. Let us take a small detour here to understand why centring your text is very important.
Many times, we don’t think about the principles of text alignment. Simply put, left alignment is going to be the best option for you. Centring your text works, when you are working on titles, call outs or anything of that sort. There is a huge history behind the reason why we find it easier to read from left to right and that is better left to the historians.
For our understanding, it is important to know why we are centring our text and why we are aligning it to the left and to the right (which should not be considered very often)
Now, that you have understood the basics of html files and also know why centring and alignment is important for text, let us look at an example of actually creating one.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>My First Heading</h1>
</center>
</body>
</html>
When you save the file now, it should now save as shown above and you can re-open it in your browser. If your browser is still open, you can just refresh the page to see the changes that have been made.
Step 5
We all know how important adding a video to your website is. Videos can change a visitors’ experience drastically and that is what really adds value to the content on your website. Now, if you are using Notepad, it is fairly simple for you to embed a YouTube video onto your website.
You can either right-click on the video and choose the Copy embed video option OR you can click on the video and choose the share option, under which if you click the “Embed” option, you can copy the embedded code onto your editor, refresh the browser if it is open and then VOILA!
<!DOCTYPE html>
<html>
<body>
<center>
<h1>My First Heading</h1>
</center>
<center>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/IWIbdQ0K88E” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</center>
</body>
</html>
The biggest advantage of doing this is that you can change the width and the height of the video. Just change the numbers in the embed code and keep everything else the way that it is. If you would like to change the text from “My First Heading” to “My First Website Video”, you can change that on the code on your editor.
Step 6
This involves you adding another link to your video page, so that people can come to it and find the link there, which is going to lead them to Google.
Notice how you used the center tags to ensure that it is centred. Using the <br> tag is going to give a break between the video and the link.
You should be able to see a link that is right below the YouTube video. Here, you can add any link that you want your visitor to go to, just by modifying the href attribute.
Step 7
Now, we are going to create a second page to your website, that people can go to. You are going to use the same code that we used at the start by modifying it to Page 2. In this way, you can create links to various parts of your website instead of linking it to Google. This will make it look more professional.
Save another html file and you can add the below code to it:
<!DOCTYPE html>
<html>
<body>
<h1>Page 2</h1>
<p> My 2nd page.</p>
</body>
</html>
To link to Page 2, we are going to modify the link in the first file, where we had put it for Google. The change is going to be like this:<a href=”page2.html”>Page2</a>
If you have created the link right, then you should be able to visit your second page, when you click on the video. If it is not working for some reason, then it is best to retrace your steps and find out where you went wrong. Knowing how to add URL’s and links to your website can be a very powerful tool. If you were to look at it, Google is a vast repository of a collection of links indexed by Google.
Stylizing your Website
This is the fun and aesthetic part of your website building. For this example, we are going to look at the hover effect and add a button to your website. The hover effect essentially makes your button turn a different colour, when you hover it with your mouse. Before we add the hover effect, let’s style the link to Page2 using CSS so that it actually looks like a button you would want to press.
Copy and paste this code just below <body> tag. Do not overwrite the existing code.
<style media=”screen” type=”text/css”>
a {display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
}
Your website should now look at what has been created above. You can change the text from “My first Website Video” to “My First Website”. There should be a header at the top, a video that you have selected in the middle and a button to a link at the bottom. When you hover over the button on the link, the colour should change to dark blue. If your website doesn’t look like something like this, then that means you need to go back and see where you have made your mistakes. Read and re-read your code and you are sure to find the error.
This is all you need to go live with your website. It needs to be uploaded to a server that is connected to the internet at all times. You can choose to do that professionally, as it is a fast and stress-free way of doing it.
We hope that you enjoyed this tutorial as much as we did. Happy coding!