HTML Introduction

What this course will cover

1. Web pages
2. HTML syntax
3. HTML elements, attributes, and semantics

Prerequisites

• Basic understanding of how the web works
• Familiarity with text editors and file management
• Basic knowledge of how to open a web browser

This course assumes you know what a browser is, how to open it, how to create a file on your computer and how to use a text editor like Textedit on Mac, Notepad on Windows, Notepad++ or Visual Studio Code . If you don’t know how to do that, you can find many tutorials online.

What is HTML?

Do you know why the web pages are called “web pages”? History and naming conventions do not strafe far, and just like before, when articles were written on real paper pages in the newspapers for example, today’s pages are written in a file, that looks just like a page. And every page tells a different story, which is written in a conventionalized grammar. Every site you visit, every email you receive, every article that you might read on the web, no matter how complex, is written on a simple page using simple markup language called HTML.

What is a markup language?

The word markup just means that you “mark” a certain word or phrase in a text to be something special. For example, you can mark a word to be bold, or italic, or to be a link to another page. This is what HTML does. It allows you to mark up text in a way that browsers can understand and display it correctly. And that is pretty much it.

This action is called “tagging” and the markings you leave on the text are called “tags”. Tags are the building blocks of HTML. They are used to create elements, which are the components of a web page. Each element has a specific purpose and can contain other elements or text. The element can also have attributes, which are additional information about the element. For example, an image element can have an attribute that specifies the source of the image.

How does a tag look like?

A tag is a simple piece of text that is enclosed in angle brackets. For example, the <p> tag is used to create a paragraph element. The opening tag is <p>, and the closing tag is </p>. The closing tag has a forward slash before the tag name to indicate that it is the end of the element. The text between the opening and closing tags is the content of the element.

<h1>This is a heading</h1>
<h2>This is a subheading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

In the next lesson, we will explore the tags in more detail and learn how to create our first HTML page.

Questions