Introduction to HTML

HTML stands for Hyper Text Markup Language. It is a language used to create web pages. Okay, what are web pages 🤔. A web page is a page on the web, now what is a web 😠. Lets use a very obvious example. The page you’re looking at now on your screen and reading this text from is what we call a web page and a collection of web pages form a website. These pages are designed using different languages like HTML, CSS, PHP, JavaScript, etc. but they all serve a different purpose.

HTML is basically used to define the content that is to be featured on a web page for example, paragraphs, headings, images, videos, among others. Just structuring what is to be on a web page. HTML has gone through five versions since the start of the web and the development of the the language is overseen by W3C (World Wide Web Consortium). In this course, we are going to focus on the latest version of HTML which is HTML5. But before we start the coding, let us first understand how web pages are loaded onto our devices.

HTML Elements

HTML is made up of elements that are made up of tags. For example, let us see some of the elements in this code snippet:

<h1> Learning about HTML is awesome </h1>

The above code is of a heading. It starts with <h1> which we call the opening tag and closed by </h1> which is the closing tag. The text in-between is the text to be displayed on the screen. When you add the three together i.e., <h1> Learning about HTML is awesome </h1>, we call this an HTML element.

Some HTML elements do not have closing tags. These are called self-closing tags (You can access the full list of all self-closing tags here. As an example, let us see one element which is self-closing in the code snippet below:

<input type="text">

HTML elements can have what we call attributes. Attribute help in describing an element and are extremely important. Some attributes in some tags are compulsory as we are going to see. Attributes are put inside the opening tag for example, let us see this code snippet below:

<img src="mountain.jpg" alt="Image showing a mountain">

The above code is used to display images on the web page. img is a self-closing tag with src which holds the name of the image as an attribute as well as alt which holds an alternative text to be displayed in case the image fails to load. The src is a must have in this tag yet alt is optional. Therefore, some attributes are compulsory in some tags and others are not.

How the web works.

Before we start learning about HTML5, lets first understand how the web works i.e. how you got this web page to your screen. This web page you’re reading now is stored somewhere on the server (special computer constantly connected to the internet and optimized to send web pages on a request). You opened your browser (Chrome, Safari, Opera, etc) and typed or searched for bmutebi.com. When you did this, your request (HTTP request) was sent from your device (client) to the server for this page. The server checked and confirmed the page existed and thus a copy of this page was downloaded from the server to your device in small chucks (packets) to be displayed via your browser. That’s how the web works!

However, you don’t need to know all this to get your code running though it is critical that you have a clue about how everything works early in the course.

About this course

You don’t need to know anything for you to take this course. We are building from scratch moving up. We are going to learn by building mini projects that will help us put what we have learnt to test and thus helping us master HTML super-fast. At the end, we shall build a mega project called Masha Foods for a one restaurant around Kampala city. If you are so adventurous, you may have visited it. You can take a look at this website from here. You can download the source code for this project from my github account here

You may need to download some software on your laptop or device on which you’ll learn to code i.e., browser (which I am sure you already have) e.g., Chrome, Safari, Firefox, etc. Microsoft Internet Explorer is not among the browsers recommended for use.

A code editor is another software you should have like Visual Studio Code, Sublime Text, Atom, etc. Any code editor you have will work well for you. These two software will be enough for you to undertake this course.

In case you don’t want to download these software, there are a lot of online tools out there you can use to run your code. My personal preference is codepen.io. You just head over there and sign up for a free account. You can as well go to codesandbox.com or w3schools.com. All these require you to have an account for you to be able to use them.

Without further chat, lets start the journey 💃🏻!