In this section, we will teach how to create and run a simple HTML code.
Hello World in HTML
Hello World is a simple program in any language that shows the message Hello World to the output and the purpose of this program is to simply show the users (those who just started the language) to see how to set up the development environment and test if their setup is correct.
Basic HTML Coding
Alright, first create a file in one of your directories with any name and the extension .html
For example, we created a file named `hello.html`.
Now open that file using an editor like the Windows Notepad or the Sublime editor etc. and put the code below there:
Example: print Hello World
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
Now save the file and open it using a Web-Browser like Firefox, Chrome, Brave, etc.
You’ll see the message Hello World appeared on the page.
Note: the page you see here is called an HTML document. Simply because it is created using HTML!
Alright, now let’s get into details of the elements we’ve used for this simple document.
HTML <!DOCTYPE html> Tag
First of all, HTML has gone through multiple versions over many years! For example, the current version of HTML is called HTML 5, and that’s the one we will use throughout the whole course. But browsers don’t know that we want to use the latest version of the HTML and so it is our responsibility to tell the browsers that the document we’re building actually uses the latest HTML syntax and elements.
So by adding the `<!DOCTYP html>` on top of an HTML document, it sends a signal to the browser that the elements used in this document are from HTML5. Now browsers know how to interpret the document correctly to display the result on the page.
HTML <html> Tag
The entire elements we used to create an HTML document are surrounded within the boundary of <html> </html> element.
Basically, you first start with the opening tag <html>, after that comes the rest of elements we want to use in our HTML document and finally we put the closing tag </html>.
So anything between <html> and </html> represents the HTML document.
HTML <body> Tag
Most HTML documents have two parts:
- header
- body
The header part is the place where we put meta information related to our document! For example, the title of the document, any link to an external resource that should be invoked along with the rest of the document, information related to the font size, etc. they all come within the header of an HTML document. For this simple example, we didn’t use a header, but if you wanted to add one, you would need to use the <head> element, which is explained in later sections.
On the other hand, the body of an HTML document is the place where we put the body of our document! Those content that we want users to see! For example, the simple message Hello World that you saw on the page is part of the body of the document.
Now we use the <body> element to define the body of an HTML document and this is the place where we put the content of the document.
Strictly speaking, between the opening tag <body> and closing tag </body>. This area is the body of an HTML document where you put your HTML source code to build an HTML document.
HTML <p> Tag
The <p> element stands for paragraph and we use it whenever we want to create a paragraph in an HTML document.
In our example, the Hello World is written inside the body of a <p> element and when our browser saw the content of this element, it printed the content on the page.
