During the course of your learning, you will need to write code. Copy and paste is not recommended and will greatly hinder your learning and understanding. This is a very important part of the learning process. You will not learn anything if you do not write the code yourself.

Do not worry if you do not understand everything at first. This is normal and part of the learning process. The important thing is to keep trying and practicing. The more you practice, the better you will get. You will learn by doing and by making mistakes. This is how we all learn. Do not be afraid to make mistakes. The more mistakes you make, the more you will learn. All the parts you do not understand will be covered in following sections. So do not worry about it. Just keep going and you will get there and you will be an HTML pro in no time .

The Basics

The best way to learn in my opinion is to use a simple text editor like notepad or notepad++ and write the code yourself. You can use any text editor you like, but I recommend using one that has syntax highlighting and auto-completion features. This will help you to see the structure of your code and make it easier to write.

Once you have decided on a text editor, you can start writing your first HTML page. The basic structure of an HTML page is as follows:


                            <!DOCTYPE html>

                            <html>

                            <body>

                            <h1>My First Heading</h1>

                            <p>My first paragraph.</p>

                            </body>

                            </html>

Type this code into your text editor and save it as index.html. You can name the file anything you like, but it is a good idea to use the .html extension so that your browser knows it is an HTML file. You can also use the .htm extension, but it is not as common.

Once you have saved the file, you can open it in your web browser by double clicking on the file you just created and it should open in your default web browser. If it doesn't, you can right click on the file and select "Open with" and choose your web browser from the list. Your web page should look something like this:

Don't worry if the web address is not the same. It is currently reflecting the location of where you saved the index.html file.

All HTML documents start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type and helps browsers to display web pages correctly. The declaration must be the first thing in an HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag. It is an instruction to the web browser about what version of HTML the page is written in and must only be declared once at the top of the page.

The <!DOCTYPE> is not case sensitive but it is common practice for it to be in capitals.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

This will be at the top of every HTML5 document. It is the same for all HTML5 documents. It is not necessary to include the version of HTML in the declaration, as it is always HTML5. So you can just use <!DOCTYPE> for all HTML5 documents but I would include the html to be clear in case in the future a new edition of html is introduced, such as (most likely) HTML6.

Viewing HTML Code in Your Browser

Have you ever wondered how a web page is made? Why it looks the way it does? How the text is formatted and the images are displayed?

You can view the HTML code of any web page in your browser. Right click on the page and select "View Page Source" or "Inspect" (depending on your browser). This will open a new tab or window with the HTML code of the page. You can also use the keyboard shortcut Ctrl + U to view the source code of the page.

You can also use the "Inspect" tool in your browser to view the HTML code of a specific element on the page. Right click on the element and select "Inspect" or "Inspect Element". This will open the developer tools panel and highlight the HTML code for the selected element. You can also use the keyboard shortcut Ctrl + Shift + I to open the developer tools panel.

You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens. This is not a permanent change to the page you are viewing, but instead lets you experiment to see what happens if you change something. This could be a good way to learn how HTML and CSS work together. You can also use the Console panel to run JavaScript code and see the results in real-time. This is a great way to learn how JavaScript works and how it interacts with HTML and CSS.

CSS and JavaScript will covered later in the appropiate learning sections. In the mean time just know they exist and will extend your HTML pages to new heights. Until then, just focus on learning HTML and how it works. Once you have a good understanding of HTML, you can move on to CSS and JavaScript. These are the three main technologies used to create web pages and web applications.

Introduction

Elements