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

Welcome to part 2 of this article, “how to build a website for free”. If you are new make sure you check part 1 first, here. In this article you’ll learn about the header element and its child elements. This is your logo, nav elements and links when you navigating to other pages. Without wasting any time let’s get to business.

header, main, footer

Add these html semantic elements on your body element. Reason they are called semantic elements is because they clearly describe meaning to both the browser and the developer. These are few of the semantic elements and to be clear this is to make your code readable by others. Some developers may prefer to use other elements which does not make any difference.

div, h2, nav, ul, li, a

On our header we have a div with a class attribute. For now you don’t have to worry about these attributes on both of our div. You are going to see the purpose of these attributes later on when we styling our web page. The h2 inside our div was supposed to be our logo but I decided to use h2 which is going to make our text look big and bold. The h element starts from h1 (the biggest) to h6 (the smallest) you can play around with it to see the effect. The nav element group our links together and separate them from the logo. Inside the nav we have ul (unordered list) element inside add li (list item) element here the thing to remember is the ul element is always a parent of li element, they coexist.

Every time when you have a list of things it is good practice to use this element. Sometimes you might find yourself using ol (ordered list) instead of ul but you can just play around them to see the difference. Inside li element is a (anchor) element with attribute href and a value “index.html”, a is going to put a hyperlink on our text if you don’t know what a hyperlink is, you’ll see after this. Then “href” points to the very page that we are building. The following elements does the same thing. Now you can save your work by clicking Ctrl + S and when you are done go to your web page and open it with your preferable web browser, Voila!! half of your web page is done. If you click on your link “Home” you’ll see it takes you to the very same page. If you click to other links it’s going to give you an error because you haven’t created those pages.

Homework

This is how I leave you so as a homework go ahead and create the remaining pages. Research about other html elements and play around with them on the remaining pages. You can send them to my email, I’d like to see what you have done. Will continue with our website on the next article. If you are struggling to comprehend feel free to contact me on the form and I’ll be happy to help. I tried by all means to keep this article as comprehensible as possible.

Learn more HTML elements on this website: w3schools

Leave a Reply