Basic HTML Website – tutorial on creating a basic html website

Basic HTML Website Tutorial

Have you ever wondered how a simple, basic html website is built? To be honest, it is very easy to learn and understand even for a non–web designer (in my opinion). You don’t need to be an HTML expert to know how to create a site. Learning some basic HTML and you are on your way to building your first website! This tutorial can be accomplished just on a local computer so you don’t need a domain and hosting. It can be viewed in your browser without it being a live website. On to the tutorial.

Software Needed

For a basic html website you don’t need any fancy or complicated software. All you really need is a basic text editor l like text edit (mac) or notepad (windows). I prefer a program called Sublime2 (mac/windows). There are many others out there but as long as you can save has an html file, it should work fine.

Required HTML for every website (in order to function correctly).

There are some basic HTML tags that each website should have. These tags are the doctype, html, head, title, and body tags. Below is all of these tags as shown in my text editor Sublime2.
basicHTMLtags

Explanation of basic tags

DOCTYPE tag is what helps the browser display the content correctly. Basically tells the browser what version or type of html it is and then it displays accordingly.

Html tag is what describes the web document. It knows whats in between this is the actual html of the page.

Head tag is the area that includes all head elements but isn’t visible in the web page. This can include the title, scripts, styles, met tags, etc.

Body tag is where all the visible content of the web page goes.

Hopefully that is a simple enough explanation of those tags. If you have more questions about them send me a message and I’d be happy to help you out. Now that we have those basic tags out of the way I can talk about some content tags which should be pretty simple to understand. Here are some of the tags. Can you guess what any of them mean?

contentHTMLtags

Content Tags

h1,h2,h3,h4,h5,h6 – These are heading tags in which there are six levels. Defaut h1 is the largest and h6 the smallest.

<p>This is a paragraph tag and holds text in paragraph format. Default is not to have first line indented but you can change that with CSS.

ul, ol, li – Three tags related to lists. The first one is unordered lists (bullet items), ordered lists (number/letter lists – like an outline), and the third is the list item tag. That is what actually shows the content of each list item.

<blockquote> – Is a blockquote that is a little different that a paragraph tag. You will see the difference when viewed in a browser.

Speaking of viewing in a browser, lets go ahead and see the page we have created. Keep in mind it is extremely simple and probably doesn’t look all that interesting. That’s because there isn’t any CSS applied which makes things look better and more interesting. That will be discussed in a future blog post. This is how it was interpreted in Chrome:

chrome

I hope you enjoyed this blog post about some basic HTML. As always if you have any questions please send me a message and I will help you!