There are a few things you need to have before you start coding in HTML:
You do not need to have connection to the internet while you are coding in HTML. You can code HTML offline. Connection to the internet is only needed when you want to publish or upload your HTML pages onto the internet. We will talk about that later in another chapter.
Using WYSIWYG(What You See Is What You Get) HTML page editors like Microsoft FrontPage, are not discussed in this text. There are many advantages to code in HTML rather than using WYSIWYG HTML page editors. The most obvious advantage is that using HTML, you can have total control over your pages. Furthermore, WYSIWYG HTML page editors might not really is WYSIWYG. The pages you look at when you are creating them in WYSIWYG HTML page editors might look different on some browsers. Conclusion, stick back to HTML.
After explaining for so long, let's take a look at a actually HTML codes in Listing 2.2.
<HTML>
<HEAD>
<TITLE>Listing 2.2 The First HTML Code</TITLE>
</HEAD>
<BODY>
HI! AT LAST, I HAVE STARTED TO CODE IN HTML!!!
</BODY>
</HTML>
Figure 2.2Click on Figure 2.2 to see the result from Listing 2.2. Click the BACK on your browser to go back to this page after you have viewed Figure 2.2.
Now it is time for you to code your own HTML using your word processor. For Notepad users, load Notepad now to code Listing 2.2.
It is important to save your file in text or ASCII format and name your file with extension .htm or .html. Otherwise, your browser will not be able to load your page. Now, assuming that you saved your file onto your harddisk or any floppy disks. To view your page, just point your browser to your page, type in the address of the location of your file in the Location in Netscape Navigator or Address in Microsoft Internet Explorer. If your file is in drive A, and the name of the file is first.htm, then just type A:\ and click on first.htm on your disk. If all have been done correctly, your browser will load your page successfully.(And hopefully too.)
At this point you might wonder that whether to save your file in .htm or .html . To tell you this, DOS and Windows 3.1 can only save file with extension of 3 characters only. That is mean that people using Windows 3.1 cannot save file in .html. If you think most of the visitors of your site are using an operating system that can save file using more then 3 characters in the extension, then do save your file in html extension.
Refering back to Listing 2.2, you see many words enclosed in < and >. Those are HTML tags which tell the browser how the page should be formatted. For example, the <HTML> tell the broswer this is the start of a HTML document. While <HEAD> tell the broswer this is the head of the HTML document and <TITLE> specific the title of the HTML document.
Most HTML tags have two parts: an opening tag, to indicate where a piece of text begins, and a closing tag, to show where the piece of text ends. Closing tags start with a < follows by a /. For example, the tags <BODY> indicates the start of a tag, follow by the text or any other content, finally the <BODY> tag is closed by a </BODY> tag.
Any text between <TITLE> and </TITLE> is displayed at the very top of the Netscape window. The text within <TITLE> and </TITLE> tags will also be used to identify the page on the Netscape Navigator Bookmarks menu, or the Microsoft Internet Explorer Favorites menu. This is mean whenever someone bookmark or add your page to their favourite, the title will be used to identify your HTML documents.
<BODY> and </BODY> contain the real contents of your HTML document. This means that if you want to write or display something on your HTML documents, type it with the <BODY> and </BODY>. For example, if you change the HI! AT LAST, I HAVE STARTED TO CODE IN HTML!!! in Listing 2.2, when you save and view the HTML document again, you will see the content of the previous HTML document is changed.
You must remember that you must close any tags which is opened last. For example in Listing 2.2, we close the <TITLE> tag before closing the <HEAD> tag. This is because the <TITLE> tag is opened after the <HEAD> tag. Any tags which must be closed with a closing tags should be closed! Or else, your HTML documents might look very weird. However, not all tags have a closing tags.
Listing 2.4a shows an example of how to use HTML tags to make text stand out.
<HTML>
<HEAD>
<TITLE>Listing 2.4a Using Heading Tags</TITLE>
</HEAD>
<BODY>
<H1>This is heading 1.</H1>
<H2>This is heading 2.</H2>
<H3>This is heading 3.</H3>
<H4>This is heading 4.</H4>
<H5>This is heading 5.</H5>
<H6>This is heading 6.</H6>
<P>This is normal text.</P>
</BODY>
</HTML>
Figure 2.4a
<H1> is the largest and most important among all heading. <H1> will usually appear to be in bold and very large in most browsers. But this is not always the case. <H1> and all other headings are logical tags. This mean that they define the purpose of the text enclosed instead of the look of the text in the browsers' window. That is mean all the heading tags might produce different looks in different browsers! So, never assume all the heading tags will be bold. The browser will decide how to display the heading tags.
Instead of using the heading tags to create line break, what other method are available to create a line break? A <BR> or <P> tag will do the trick. Let's look at the following codes:
<HTML>
<HEAD>
<TITLE>Listing 2.4b Line Breaking</TITLE>
</HEAD>
<BODY>
This is line 1.
This is line 1 too!
<BR>
This is line 2. <BR> This is line 3.
<P>
This is a new paragraph.<BR>
This is another line.
</BODY>
</HTML>
Figure 2.4b
<BR> is a tag which is used to create a line break while <P> is used to create a new paragraph. In HTML, you cannot just enter a new line of text in your editor then have that line of text to be shown in a new line in the browser's window. Let say you enter more than one white space between two lines of text, or enter the next line of text in a new line using your text editor. But when you saved the file as HTML document and try to view it using your browser, the excessive white space, or line break will be squeezed back into a white space only by the browser. This is because most browsers treat all white space or line break as a white space only. So, if you want to create line break to be shown in your HTML page, you need the <BR> tag. Unlike other tag, <BR> does not have a closing tag. Because it is not logical to have text enclosed in a line break! So, just put <BR> anywhere in your HTML document when you want to create a line break.
To create a new paragraph, you will use the <P> tag in a HTML document. It has a optional closing tag of </P>, but you can just omit it if you want.(Usually it is omitted.) The fact is that most browsers will just ignore the </P>. So, you can safely forget about closing the <P> and save typing. And there are confusing and complex rules about what tags can be used inside a paragraph, so to avoid trouble, just ignore the closing tag!