Here is lesson number #7 from my series on creating a website with HTML and CSS. You can check out the previous lessons by clicking the links below just in case you missed them!
- Introductory To The Course
- Creating Your First Webpage
- Working With Web Developing Coding Editors
- Introductory To HTML
- Designing a Wireframe For Our Website
- Adding Structure To Our Webpage with HTML
In today’s lesson we are going to be adding the skeleton of a header and footer to our website.
You can watch the video version below if you like, or read the text transcript instead!
I’m going to start off by going inside our body tag and adding a header element.
The header is the top part of our website. I’m also going to put our h1 we created there earlier, as well.
Underneath our header tag, I’m going to add a section tag and a footer tag as well after that. Let’s go over these three new tags I just added to our webpage.
The header tag is different than our head tag. A lot of people get these two tags confused.
Our site’s title and navigation is generally kept here inside the header tag, as well. The section tag can be used to breakup the page into different sections. In our sections tag, I’m going to add a new element called a paragraph element.
This paragraph element will take any text you type inside of it and turn it into a paragraph.
I’m just going to put some random text here, which we can change to our portfolio and blog posts later on, but I just want to give you an example of how the paragraph element works with HTML.
The footer element is similar to the header element, except that it is at the bottom of our webpage.
We will put our copyright information, as well as other links to our social media platforms, in the footer for our client.
Let’s add a paragraph in the footer tag, as well, that will contain our website’s copyright information. You might notice that some characters that you want to display on a website cannot be typed on your keyboard.
We can use HTML entities to represent those characters. For instance, the copyright symbol can be displayed on a website by typing out the following HTML entity.
Memorizing HTML entities is not recommended as you will not be using them very often.
Whenever you need to figure out one of the HTML entities, you can always search on Google to find a reference. Now, we added a lot of new code in HTML elements to our website.
Let’s give our page a save and see how it looks in a browser so far.
Notice that as we look at our webpage, the elements are displayed one after another. This is how browsers display HTML elements.
Now, our webpage looks a little empty, but don’t worry, you’re off to a good start. We’ll be using CSS later on in the course to add a lot more style and color to our webpages.
That’s it for lesson #7 stay tuned for the next lesson.
Thanks for all the amazing support so far everyone!