Starting HTML5

Basics of HTML 5 - Part 1

Foreword: In this part of the series I introduce you to the computer language called, HTML.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is the first part of my series, Basics of HTML 5. In this part of the series I introduce you to the computer language called, HTML. I assume that you have no previous knowledge in computer programming.

HTML stands for HyperText Markup Language. Do not worry much about this vocabulary for now.

In these tutorials there will be code samples that you can try. At the end of this part of the series you will see how to test or try code.

Who can learn HTML5?
If you are good in your word processor (e.g. Microsoft Word), then HTML is something you should learn next. You do not have to be good in mathematics to understand HTML. If you are a writer (e.g. poem) for the Internet, then knowing HTML is an advantage, because with it you can format your article the way you want for the Internet. If you want to be a web designer, then, today, HTML5 is the computer language to start with.

In order to learn HTML, you just need to be computer literate.

The Web Page
What you are reading now is probably being displayed on a web page. You need to know the meaning of a web page in order to use the Internet.

A web page has three important bars at the top. The position of these bars may not be the same in all browsers. These bars are, the Menu Bar, the Tool Bar and the Address bar. The Address bar is what interests us in this part of the series. Each web document (web page) on the Internet has an address. An example is “http://www.yahoo.com”; another example is “www.google.com”. The Address Bar has what is called the Go Button on its right. When you type an address in the address bar and click Go (the Go Button), the web document (web page) will be displayed on your screen (it might take some time to load). If you type the address and press the Enter Key on your keyboard (instead of clicking the Go button), the web page will still be displayed on the screen. The web page content appears below the bars, which are at the top of the page.

The menu bar begins with the buttons, File, Edit, View, etc. The tool bar has certain buttons like the Back Button and the Reload (Refresh) Button. When you click the Back button, you see the web page you were previously viewing. When the browser is taking too long to display (load) the web page, you can click the Reload Button, to attempt fast and complete redisplay of the page. The address bar is a horizontal bar in which you type in the address (before clicking Go).

Tags
The code of a web page that has no content would have as a minimum, the following:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Anything between a pair of angle brackets is called a tag. <html> is a tag. </head> is also a tag. The above code consists of tags.

Many tags exist in pairs while some tags exist as single items (not in pairs). All the tags in the above code exist in pairs. These are the pairs:

<html>
</html>

    <head>
    </head>

    <body>
    </body>

Each pair of tags consists of the Start Tag and the End Tag. There are three pairs of tags above. Let us look at them again. In the pair, “<html> </html>”, <html> is the start tag and </html> is the end tag. This particular pair of tags is used to begin and end the web document (web page). Notice that the other two pairs of tags are included inside these <html> </html> tags.

The <head> </head> pair holds elements that are useful to the web page but are not displayed by the browser. These elements are typed between the head pair of tags. The <body> </body> pair contains elements that are displayed on the screen (at the browser). The elements you see on screen for a web page, are type in the code between the <body> </body> pair of tags.

A Simple Web Page
In this part of the series, I will design a simple web page. All that the page will display is,

    Hello World!

So the content of the page will be “Hello World!”. The page will have a title. The title of the page will be,

    Simple

Now the title of a web page appears in the Title Bar of your browser. This is the first bar at the top of your browser. Whenever, your browser displays a new web page, the title of that page appears in the title bar of the browser. Some new browsers do not have the title bar. Such browsers can open more than one web page at a time. However, in order to see a web page you have to click a tab just above the address bar. In this situation, the title of each web page is displayed in its tab. We shall come back to this title issue. Let us first of all, look at the requirements you need to execute HTML5 code.

Web Page Design Requirements
You need:
A computer with its operating system running.
A Text Editor, e.g. Notepad.
A browser installed in your computer (I am using Mozilla Firefox 31 – you can use that or a higher version).

The purpose of the browser is to display your page after you have finished your design. You type the code in your text editor such as Notepad. A text editor is word processor in its simplest form.

In order for you to understand this series, you need to know how to use the computer and the Internet.

HTML
There are 5 versions of the HTML computer language at the moment: HTML1, HTML2, HTML3, HTML4 and HTML5. You need just elementary school mathematical skills and to be computer literate, in order to learn HTML5.

Browsers
The latest versions of the popular browsers have already implemented the basics of HTML 5. Mozilla Firefox 31 is the browser I suggest you use in this series. It is free in the web; just search the web. If you see a higher version, use it.

The Example
In the following HTML code, the phrase, “Hello World!” is in the body element (tags). “Hello World!” is what will be displayed in the web page. In the code, the word, “Simple”, which is the title of the page is in the title element (tags).

Let us begin. Open your text editor and type the following:

<html>
    <head>
        <title>
            Simple
        </title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Let us look at the above code: The start and end tags, <html> </html> for the document are there.  The pair of HEAD tags, <head> </head> is there. The pair of BODY tags, <body> </body> is there.

Now, the content is the text “Hello World”. It is typed in between the pair of body tags.

I said the title would be the text, “Simple”. I want you to note that in between the pair of head tags, is the pair of tags, <title> </title>. The pair of body tags is called the body tags; the pair of head tags is called the head tags; and so the pair of tags, <title> </title> is called, title tags. This pair of title tags holds the title of your page.

You can describe the content of your web page as the body of the page. In other words, you can describe what you see at the browser below the browser bars as, the body of the web page. Anything that is in between the body tags is what you see as content on your web page (browser). The only content here is “Hello World!”, so it is all we have in between the body tags, in our simple web page code above.

The title is “Simple”. This is what we have in between the title tags. Any text, you have in between the title tags appears in the title bar of your browser, when the page is displayed.

After typing the above code, save the file with the name, simple.html, in any directory (folder) of your choice, in your hard disk.

Now open the directory and double click the file simple.html. Your browser would open and display the file. You should see as content for the web page, “Hello World!”.

The DOCTYPE Tag
The above HTML code has worked. However, it may not work with some browsers. This is because the browser has to know the version of the HTML language that the code is of. To do this, you have to type a tag at the very top of the code. For HTML 5, the tag is,

    <!DOCTYPE HTML>

This is a tag, but it is not an HTML tag. It is actually an instruction to the browser that will display the page (code) that the code has been written using version 5 of HTML. Note that there is no number, 5 for the version in the tag; just accept that status and do not ask why, for now. Replace the above code in the file you typed with the following:

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Simple
        </title>
    </head>
    <body>
        Hello World!
    </body>
</html>

The difference between this code and the previous one is the presence of the DOCTYPE instruction at the top. Try this code: Save this document, and then double click it to see that the display is the same.

Extension of the HTML file
Your HTML file name must end with “.html” or “.htm”. For the above code, the file name ends with “.html”.

Wow, we have seen a lot of exiting things. There is more. Let us conclude, take a break and continue in the next part of the series.

Conclusion
We have seen that an HTML code is made up of tags. Some tags exist in pairs while others exist as single tags. For tags that exist in pairs such as the body tag, you can include content in between the pairs of tags. This content can be text or other tags (with their own contents). The extension of the HTML file should be “.html” or “.htm”. Remember, you can try all the code in this series.

Chrys

Broad Network

Related Articles

Starting HTML5

Basics of HTML 5 - Part 1

Introduction

Related Links

Comments