Getting Started with HTML 5
HTML 5 Basics - Part 1
Forward: This is the first part of my series, HTML 5 Basics. In this part of the series I introduce you to the computer language called, HTML.
By: Chrysanthus Date Published: 21 Jul 2012
Introduction
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.
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Who can learn HTML 5?
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, HTML 5 is the language to start with.
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 Eater 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).
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, we shall design a simple web page. All 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 tile 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 your browser. We shall come back to this title issue. Let us first of all look at the requirements you need to execute HTML 5 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 4.0 Beta 10).
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.
There are 5 versions of the HTML computer language: HTML1, HTML2, HTML3, HTML4 and HTML 5. HTML1, HTML2, HTML3 and HTML4 had been officially punished. HTML 5 is still to be officially published. However, there is a draft version that many people (including big companies) are using. The official version will soon be out. The draft version is fairly good. The official version will not be much different from the present draft version. You have to start learning HTML 5 now, if you have not already started. If you wait for the official version of HTML 5 to be released, you will be late; the web site design market is competitive. Many web site designers are already learning and using it. You need just elementary school mathematical skills to learn HTML 5.
Browsers
The latest versions of the popular browsers have already implemented the basics of HTML 5. Mozilla Firefox 4.0 Beta 10 is the browser I suggest you use in the series. It is free in the web; just search the web.
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, our content is the text “Hello World”. It is in between the pair of body tags.
We said our 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). Our only content 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 appear 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 of this code. Try this code: “Save this document, and the 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.
HTML 5 versus XHTML
After HTML4, XHTML was intended to be the next version of HTML. However, that is not the case now. HTML 5 has been developed and that is what you should use when you want new HTML features that are not in HTML4. XHTML still exist, for a different purpose.
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 an HTML file must be “.html” or “.htm”. Remember, you can try all the code in this series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT