This article is the September contest winner. The author provides a basic tutorial of HTML, with code samples illustrating headings, lists, background colors, using the Frame tag and more.
The Basics
HTML stands for Hyper Text Markup Language. It is the language which is used to design and format web pages. You have probably heard of programming languages such as C, C++, Java, and Visual Basic. Each of these languages consists of syntaxes and programming rules. These syntaxes are what programmers call codes. It's important to learn how to write codes using the relevant language. Moreover, you have to strictly adhere to the rules and conventions of that particular language.
In HTML, these syntaxes are called as Tags. Tags are enclosed within angular brackets: < and >. There are lots of predefined tags in HTML, which are used for various purposes. For example, in order to modify a line of text into bold, you apply the bold tag with an opening tag as <B>, then write some lines of text or a paragraph containing some text, and close the tag using the tag </B> as shown in listing 1.
All tags in HTML have to be closed using the syntax </>. But there are some exceptions to this rule, which we will discuss later. You can code your tags as you wish because HTML is not a case sensitive language like C++ and Java.
Structure
Every HTML code needs to be written in a structure which is defined by World Wide Web Consortium. It is not compulsory to follow this structure. However, it is good practice to follow this structure while designing your web pages. Listing 1 shows the structure of a simple HTML page:
Listing 1
<!-- This is the way to apply comments in HTML. This will not
be displayed on the browser -->
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!--PAGE CONTENT STARTS HERE-->
<B>This is your first web page designed using HTML. This line will be printed as your output.</B>
</BODY>
</HTML>
Enter the above code using Notepad and save the file as First.htm or First.html. However, you can use your own file name. Now open up your browser Microsoft Internet Explorer (File | Open) or Netscape Navigator (File | Open File) and browse for the file, which you saved. If everything goes well, you will view the output. Whatever is written inside the body tag will be displayed on the browser.
Now try out the following piece of code and observe the results:
Listing 2
This text will be in Bold
<B>Welcome to HTML</B><BR>
This text will be in Italics
<I>Welcome to HTML</I><BR>
This text will be Underlined
<U>Welcome to HTML</U><BR>
<BR> tag denotes Line Break. It creates a new line.