HTML/CSS Lesson 1 – Introduction to HTML. Basic rules and structure of an HTML document.

Last updated on January 2nd, 2024

What is HTML?

HTML stands for Hypertext Markup Language. In fact, HTML is the basic language of the Web. It is a computer language used to create and design websites. It is the foundation of every web page, and it tells your web browser how to display the content of the page on the screen.

HTML consists of tags or codes, which are special commands. These commands tell your browser what to do with the text, images, links, forms, and other elements contained in the HTML page.

When you create an HTML document, you write the HTML page content using these tags to structure and format your text. You can also use HTML codes to add images, tables, forms, videos, links, and other types of content to your web page.

If you want to learn web programming with the programming languages PHP, Python and JavaScript, you need to learn HTML first.

Who created HTML, when and why?

HTML was created by a team of computer scientists at CERN (the European Organization for Nuclear Research) led by Sir Tim Berners-Lee in the late 1980s. The first version of HTML, called HTML 1.0, was released in 1993.

At the time, Berners-Lee was working on a project to help scientists share information across the internet. He realized that in order to make this work, he needed a way to create and link documents that could be accessed and shared by anyone, regardless of the computer or software they were using. This led to the development of HTML, which provided a standard way to structure and format web pages.

Since then, HTML has gone through several updates and revisions. Today, HTML is maintained by the World Wide Web Consortium (www.w3.org), an international organization that develops and promotes web standards.

What versions of HTML are there?

HTML 1.0 – Released in 1993
HTML 2.0 – Released in 1995
HTML 3.2 – Released in 1997
HTML 4.0 – Released in 1997
HTML 4.01 – Released in 1999
XHTML 1.0 – Released in 2000
HTML 5.0 – Released in 2014

What are the basic rules in HTML?

All commands (tags) in HTML are enclosed in angle brackets – < and >.

The opening tag of an HTML page is <html>.
The closing tag of an HTML page is </html>.

Most commands in HTML have a start (opening) tag and an end (closing) tag. For example, the opening tag <html> has a closing tag </html> and so on. The closing tag is the same as the opening tag, but with a right slash in front.

When multiple tags are used, then the last open tag is closed first, for example:

<b><i> This is both bold and italic text. </i></b>

The <b> and <i> tags are for bold and italic text, respectively.

To insert comments and hints in the HTML code that are not visible on the screen, you should use the <!– … –> tag. For example:

<!-- This is a comment or hint and it is not visible on the screen -->

All HTML page names must end with dot html (for example: page.html).

What is the basic structure of an HTML page?

The basic structure of an HTML page includes the following elements:

<!DOCTYPE html> – This is the document type declaration, which tells the browser that this is an HTML5 document. This tag has no closing tag.
<html> – This is the root element of the HTML document. It contains all the other elements of the page. Its closing tag is </html>.
<head> – Information placed in the HEAD section of the HTML page is not displayed on the screen. This is where you include important data about the page called metadata, such as the page title. Its closing tag is </head>.
<title> – This element is used to define the title of the page, which appears in the browser’s title bar and in search results of Google and other search engines. The <title> tag is an important element of SEO (Search Engine Optimization). Its closing tag is </title>.
<body> – This is where you include the main content of the page, such as text, images, links, videos, and other elements visible on the screen. Its closing tag is </body>.

So the simplest HTML page will look like this:

<!DOCTYPE html>
<html>
<head>
<title> My first HTML page </title>
</head>
<body>
Hello, World!
</body>
</html>

Where to write the HTML code?

Open the simplest text editor Notepad. Notepad is a part of Windows operating system, so if you have Windows, you have Notepad too. Just search for Notepad in you computer and open it.

Find Notepad in your computer

This is what the Notepad icon looks like:

Notepad icon

Copy and paste in Notepad the following code:

<!DOCTYPE html>
<html>
<head>
<title> My first HTML page </title>
</head>
<body>
Hello, World!
</body>
</html>

In Notepad, this code will look like this:

Notepad - first HTML code

Now save your first HTML document on your desktop – click File -> Save as… from the top menu of Notepad and write some name, for example test.html

Notepad save us

Save HTML page

Double click on the file icon of your HTML page on the desktop to open it – you will see the text “Hello, World!” on the screen.

What is Notepad++?

Instead of Notepad, you can use the free text editor Notepad++ (Notepad plus plus). Notepad++ has a lot of useful features and can color your code to make it more readable. This is what the Notepad++ icon looks like:

Notepad plus plus icon

Download Notepad++ from its official page notepad-plus-plus.org and install it. Open it and select Language -> HTML from the top menu.

Notepad plus plus HTML button

Then paste your code into the editor and click the Save icon from the top menu to save it as an HTML page. In Notepad++, your code will look like this:

Notepad++ Save HTML code

How to view and edit the HTML code?

Right-click on your HTML file icon and select Open with -> Notepad or Notepad++.

Open file with Notepad or Notepad++

 

Between the tags <body> and </body> you will see your text “Hello, World!”. Delete the text “Hello, World!” and write something else, for example “My new text.”, then save the changes (File -> Save from the top menu for Notepad or Save icon from the top menu for Notepad++). Now open your file in the browser and you will see “My new text.” on the screen.

Does it matter what I name my HTML pages?

There is one important rule when naming an HTML page – if you name your page index.html, it will mean that it is the main page of the website or directory. I.e. if you have a website and you have uploaded index.html and test.html pages to the root directory, when you type the website address in the browser (www.example.com, where example is the domain of your website), the index.html page will always open first. I.e. example.com is equivalent to example.com/index.html