How To Start A Website From Scratch Using HTML

A simple follow is where it begins

No really please follow otherwise you might be missing some great content. Also, follow me on medium

It's 2021 and the world is still under attack from the corona-virus. Most of us have picked up a new hobby and interest. Maybe one of them might have been making websites or even making one to have an extra source of income. But either way, you still should know how to use HTML to make yourself a site.

A Basic Understanding

Html is a very simple and easy-to-understand programming language that makes up most of the content of the internet these days. Everyone can simply look up some tutorials or guides on how to use HTML. Heck even you just did otherwise why would you find this. Everybody also has the capability to understand how HTML and its elements work. You open an element and then you have to close the element. For example, when you open the fridge you should shut it because if you don't shut it everything inside of it will go bad. Just like HTML if you open a tag but don't close it, the element won't appear or may break your site. But you don't just yet know what an element is so that may have sounded a bit confusing.

Simple Facts

When you look at a site you see text and text that is bold or underlined, text that has a link attached to it, text that is big and or small, you see images and graphics to help you understand. All of those “elements” require some kind of tag. Text or paragraphs require the <p> tag so that the site or server knows that that text is a paragraph because it is inside of a <p> tag. The site will know when to stop reading the text as a paragraph when the user adds a </p> to the end of the paragraph tag. The reason that you use a </p> is that that is what closes the element and if you don't what is described above will happen to your site. So take the time after every element you use to close it. To close elements whatever tag you use add a </(element you used)> to the end of it to close it. Also as mentioned above I said tags, not tags so that brings us into the rest of the tags.

Tags

There are many different tags that you can use on your website. One for an image, one for a paragraph, one for a video, one to underline, one to make text bold, one to improve your site SEO, one to add tables and lists. These are some of the most popular tags across the internet.

Header 1

This is the tag that will make text large. You use an h1 tag wherever you would like but only once, usually, the name of an article or site, to stand out. <h1></h1>

Header 2

These tags usually are used for labeling elements on your site or more. Don't use to many though.

Header 3

This is the most common type of tag. Most people use this kind of tag for article sections or names of articles on a homepage.

Those are some of the most common header tags used on different websites that people use. When making a website, they are actually important if you plan for your website to be popular or just be discovered in general. Make sure that you dont overuse these as doing so will result in bad seo habbits and you will not rank well.

Image

This tag is used to add an image to a website to help people understand your site or just to keep people interested in your site. Most users of a website will be more likely to leave if there aren't any kind of images or visuals. Using this tag is a bit different though than what you are used to. Before you close up the you need to add an src=”” to add the img file. Do so by using the following and using your own img and directory. The closing tag is not needed.

<img src=”/path/to/your/file.jpg”>


Links

Now this tag, in a way, is like the img tag. To use it you need to use a special string inside of it to add a link to the text. It's very easy to use and most search engines love it when you add links to your content but not too many links. You can add a <a> tag to your site using the following.
<a href=”https://example.com”>links text here</a>

<a href=”/path/to/a/html/file/in/your/site.html”>link text here</a>


Bold

If you would like to make some text on your site bold you need to use the <strong> tag. It's very simple and easy to use. Find the text that you would like to make bold and put it between the <strong></strong> tags.

Meta

This is a very important tag to use if you would like your site to be on google. Basically, the meta tags are what add keywords and a description, and more to your site. Users of your site cant see the content from these tags since they are in the <head> of your site. Search engines such as Google, use these tags to rank your site and search it.

Title

Another very important tag for your website. It makes the current page that you are on and makes the tab name look nice and neat instead of an ugly file and directory. Required by most search engines.

Head

Any SEO tags such as the meta and title tag go here. The content inside of this element will not be shown to users of your site. It contains the content for search engines such as the site description and SEO data.

Body

The site's content that you will show to your users will be inside this element. It's needed as the content won't really be shown if you don't use this tag.
Now that you know some of HTML’s most important tags, it's time to actually make a site with HTML. It might seem a bit confusing at first but it's very simple to understand once you know.

Making The Site

To make an HTML site you need a simple layout first to make sure you have the right tags. Using the following snippet you will see the document type, HTML tags to declare the HTML content and then the head and body tags.

<!DOCTYPE HTML>
<html>
<head>
<title>TOP Tutorial</title>
</head>
<body>
<h1>Hello World!</h1>
<p>site content here</p>
<img src="https://theoverpoweredpc.tk/images/raspberry-pi.jpg">
</body>
</html>

Then you want to add the title inside the head tag and then some content inside of the body tag. Once you have that in there you are good to go. Congrats you just made a simple HTML site. Now go ahead learn CSS and js and make some amazing stuff. Learn more about HTML to expand your site.

See the full source code here: https://github.com/Grantrocks/htmltutorial/blob/main/index.html