Hyper Text Markup Language, HTML is the number one thing amateur programmers are asked to learn when it comes to web development.
But if you are like most people, you would want to get a feel of how to make a website with HTML before learning the entire thing.
And that is what this post will teach you.
The key part of HTML that you can use to design a website in a minute or two.
How To Design Website Using Notepad
The easiest way to write HTML is using a text editor and the popular one is Notepad.
Notepad comes with all windows computer. a simple search on your computer can get up and be running with writing your first website.
You can also find the Notepad program on the windows home screen.
Move to the next step when you have opened it.
What Are The Important Tags In HTML
First, what is a tag?
A tag in HTML is what you use to make an HTML effect on your website. What that means is this…
The tag is what you use to tell HTML what to do.
Most tag in HTML has a way to open and close it.
So what are the important tags in HTML?
The HTML Tag <HTML> </HTML>
This is the mother of all the other tags and as you have read earlier, most HTML tags have a way to open and close them. The part with / signifies the closing tag.
Every other tag goes into the HTML tag. If this tag isn’t present, there is nothing like HTML.
The HEAD Tag <HEAD> </HEAD>
The head part of the HTML is what keeps the important details of that specific page. Details like the title of the page (there is a tag for that as well).
You can also link to other programming languages from the head of the HTML.
The TITLE Tag <TITLE> </TITLE>
This is located in the head tag and it keeps the title you want for the page. It is important that you note that it has both opening and closing tag.
The title of the page could be something like Welcome | Home, About Us, Contact Us etc.
The HTML Tag <BODY> </BODY>
This is the tag that keeps all the thing you want to see on your web page. Just like the head keeps important info that does not show on the page.
Body is where you put the images, text etc. that your visitors will interact with.
So, you can copy each tag one after the other into your notepad and play with them. The next subtopic is very important in designing a website using HTML.
How To Save An HTML File
By now you should know that notepad can be used to write HTML, but how do you save this notepad? Is it the normal way you save all other notepad docs?
No, it isn’t.
You know the default file extension for a notepad document is .txt and in HTML we aren’t doing that.
So to save your HTML file in Notepad, click on file at the top left and select Save As…
Now since this your first page of the site you are building, you should give in “index” as the name. and the extension will be .html
Now you can open your website using any web browser of your choice.
The Important Things To Note
Create a separate folder for all your image and link to them within your HTML file using
<img src = “img/pcmoment.jpg”>
Where img is the name of the folder and pcmoment.jpg is the image name. notice that the img tag does not have a closing tag.
There few tags like that in HTML.
Also create a separate folder for your stylesheet so that you will be able to link the styles to all your html pages instead of styling each page.
The simple way to link a CSS file to HTML is by putting this
<link rel = “stylesheet” type = “style/css” href = “css/style.css”>
in the head section of the HTML file.
Note that you must have created a file names style.css and put it in your CSS folder.
That concludes this post on how to design a website using HTML. I will like to reiterate some important facts once again, make sure you save all the HTML files with a .html extension and use the index as the name of your site’s homepage.
If you use images and style too, create a separate image and CSS folder. CSS file too must end with .css extension.
Thanks for reading.