How to build a website for free – HTML(Part 1)

I’m going to teach you how to build a website for free. When we are done, we are going to put it out there for everyone to see it. All that is required is you and your computer, but later on you might need a little access to the internet. After this tutorial and upcoming tutorials, you should at least have a basic knowledge of these web programming languages: HTML, CSS and JavaScript. You will know at least the basics to start building your own website all this done for free. Without wasting any time let’s get to it.

HTML

HTML stands for Hyper Text Markup Language, it’s the standard markup language for documents designed to be displayed in a web browser. It’s the basic building block of web pages, the context that you read, the pictures that you view and the videos that you watch are embedded on HTML elements or tags. So, you may ask what are HTML elements or tags? That will be discussed in the following paragraphs.

I know you are wondering and you are asking yourself, “but I don’t have the internet, I don’t have the required software’s”. Like I said all you need is a computer and yourself. First you need to know what is a website which you can find that answer on my previous article: website.

Creating an HTML file

How to build a website for free

First go to your computer open notepad software application, if you don’t know what a notepad is, go to your start menu and type notepad. So basically, notepad is a text editor that comes preinstalled in Microsoft Windows. But it’s not for writing CV’s, it’s for text, html etc. Once your text editor is opened you can start adding the above code. These are what we call html elements and html tags. Tags makes up an html element I hope that makes sense.

Doctype, html, head

Let me explain what is happening, the first line represents what version of html is this which is HTML 5, how do I know? It because in HTML 5 they removed all the tedious unnecessary code. The second line represents the structure or a frame of a page. The ‘lang’ which stands for language is an attribute and “en” stands for “english” a value. Basically we are telling the browser that in what language is this page, in this case which is English. You can find other language codes of course for your preferred language. Within the html element we have the head element which I won’ dwell much on it for sake of simplicity.

title, body

Let me explain the title element within the head element. This is what you see on your tab of a web browser when you visit a website. In short you write the title of your website in the title element in my case is “My First website”. The body element is everything you see on a web page. When you are done go ahead and save your file as html, the shortcut is Ctrl + S. File name should be index.html and make sure in “save as type” you select “All Files” then click save.

How to build a website for free - save

When you look for the file that you just saved you’ll notice that it appears in the form of your default web browser logo. Yes voila!! you just created your first web page, now let open the web page. It’s empty right, but when you look at your web browser tab you can notice something different. Yes, that right it what you wrote on your title element.

Homework

This is the end of our part 1 as homework I’m going to leave this up to you to go ahead and figure out how to open the index.html file we just created. With our text editor(notepad) add these lines of code, I’ll explain them below.

How to build a website for free - meta tags

The above html tags are called meta tags. Our first meta tag has an attribute “charset” and a value “utf-8” which UTF stands for Unicode Transformation Format. So, this meta tag tells the browser which encoding to use in order to display this web page correctly. The second meta tag has an attribute of name and content the first attribute which is name describes our settings on this meta tag which is our viewport. Our content tries to give the browser instructions on how to control the page’s dimensions and scaling. Since we view web pages on different screen sizes. The rest of our meta tags are not that important for this subject but as you can see, they probably follow the same pattern.

Now this is how I leave you, will continue with our website on the next article (Part 2). If you are struggling to comprehend feel free to contact me on the form and I’ll be happy to help. I’m trying by all means to keep these series of articles as understandable as possible.

Learn more HTML elements on this website: w3schools

Leave a Reply