HTML Basic

HTML Basic

HTML: The basics

The first thing you need to grasp is how to create a HTML document. This first step requires you to have two basic tools, which are namely, a text editor and web browser software. To get started, begin with simple text editors like notepad for Microsoft users and TextEdit for those who prefer Macs. At the end of this tutorial learners should be capable of creating simple HTML file that displays the message hello world on a web browser.

Step One

Open a new file on your text editor and save it as helloworld.html. Note that it is important to include the .html extension while saving your file otherwise your system will save it using the default .txt extension.

Step Two

On an empty text editor window, type the code segment that follows.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>A simple HTML document</title>
</head>
<body>
 <p>Hello World!<p>
</body>
</html>

Step Three

Double click on the file to open it. If the file does not open in your default web browser, first open your browser and then drag your file to it. Check to see whether you saved the file in the correct format if the problem persists.

Interpreting the code

Although the code will work when you copy and paste it on your text editor, you might be interested in the meanings of the various tags that were used in the example.

The first line denotes a declaration of the HTML5 Document type that is currently in use. The segment that is enclosed between the <head> and </head> tags is a header section. It provides information about what a particular web page is about. Lastly, the segment between the <body> and </body> tags encloses the body of the document. Try replacing the phrase ?Hello World!? with a bigger paragraph and observe what happens.

Tags and elements

A HTML document comprises of elements and markup tags. As seen earlier, markup tags are the fundamental building blocks of HTML. Essentially, a markup tag consists of a keyword that is surrounded by angle brackets. Normally, they come in pairs – <html> and </html> is an example that has both an opening tag (start tag) and a closing tag (end tag). The start and end tags are identical except for a slash before the opening bracket of the end tag that tells the browser that a command has come to its end.

Join Telegram Join Whatsapp