HTML Overview

In this overview, I want to tell you a little bit about the basics of the web in general, and how it works.

Also, I want to tell you about how this HTML section will be organized, and the approach I’m taking to teach newbies how to get started.

I won’t give you the formal definition of HTML, cause you can read about it on Wikipedia or any other place on the internet.

HTML is the baby step into learning web development. It does allow you to create web pages by providing you with a list of building blocks.

HTML building blocks are called tags, using these tags you can construct different kinds of web pages.

Tags are semantic elements that describe your web page, for example, we have a tag for heading, another for paragraph, another one for image, and so on.

HTML is a simple markup language that helps you describe your web page, it’s not a programming language, You can imagine it as a set of common conventions used between you and the browser.

The browser is an application that does understand HTML, and other frontend technologies, for our case we write our web page using HTML, and we give it to the browser to render it.

An example of a browser is Chrome, Firefox, or Microsoft Edge. There's a lot more but you got the point, and by the way, you’re using one while you’re reading about HTML on this web page.

I mentioned frontend technologies above, we say frontend to everything that runs directly on the browser, for example, HTML does run directly on the browser, no help needed from any external parties.

In web development we have three choices we can make when getting started:

  1. Frontend: and it’s like we said above.
  2. Backend: it’s the same as frontend with one difference, instead of a browser you will have a server.
  3. Fullstack: which is you combine both frontend and backend

The server is another application that serves different types of content. An example will be HTML or JSON.

We won’t talk about servers related information in this section, but we’ll do for sure when we’re on the backend section.

But one important thing you need to understand very well, which is the concept of request/response. Below there’s a schema that illustrates this concept.

Request Response File Protocol Usage Scheme

The figure above, it’s a simplified version of how the web pages work, if you notice the browser URL is starting with file:// and not with HTTP://.

FILE:// or HTTP:// both are protocols used to exchange data between the browser and your own computer or a web server over the internet.

In this section, we will be using the FILE protocol, cause I know if you’re taking this course, you’re just getting started, so it’s simple to just open the HTML web page directly into your browser.

And I think focusing on the HTML part will be a good way to get a taste of frontend development.

Before we move to the next chapter in this section, let me tell you what to expect and how your learning experience is going to be.

We will focus on the key points for each chapter, we’ll have a set of small lines of code, with explanations along the way.

At the end of each chapter, you will have a fully working example that you will be able to copy or write on your own HTML webpage, then open it on your browser.

In the next section, I will show you how to set up your computer to be ready for writing HTML.