How To Start A Website From Scratch Using HTML
A follow is where it begins
No really please follow otherwise you might be missing some great content. Also, follow me on dev.to
It's 2021 and the world is still under attack from the coronavirus. 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.
<h1></h1>
This is the tag that will make text large like the name of this paragraph. You use an h1 tag wherever you would like some text, usually, the name of an article or site, to stand out.
<h2></h2>
These tags usually are used under an h1 tag for a slogan or some kind of text that is also important but not important as the h1 tag. Most people do actually use this tag for their slogan.
<h3></h3>
This is the most common type of tag. Added for each paragraph of an article or just some kind of name for something. Most people use this kind of tag for article sections or names of articles on a homepage since it's SEO friendly.
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. They mark the content and usually contain keywords.
<img>
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 <img> 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”>
<a></a>
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>
<strong></strong>
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></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></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></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></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.
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
