What is HyperText ?
Hypertext means that some text in the HTML document carries a link to a different location. Such links can be present either on the same page or some other page located on another computer page. On clicking this 'hot spot', the viewer is transferred to that location.
What is Markup?
Markup means that specific portions of a document are marked up to indicate how they should be displayed in the browser.
HTML carries information about the web page though, the display of the document is solely dependent on the browser. For this reason, you should test your HTML code in the two most used browsers, Internet Explorer from Microsoft and Netscape Communicator from Netscape. With HTML you can embed various objects such as images, video, sound in your pages.
What will you learn here?
This is a basic HTML tutorial that describes and explains some common HTML tags. By the end of this tutorial you should be able to create simple HTML pages. Advanced HTML tags with tips on page layout can be found in the next tutorial,
The Tips and Tricks section features some interesting tips on HTML. You should explore this section only after completing the two HTML tutorials.
If you are working under the Windows system, I recommend NOTEPAD or WORDPAD. In UNIX based systems, you can either use PICO or the VI-EDITOR. If you planning to work on a more sophisticated editor, just remember to always save the HTML files in ASCII format.
To save a file in Notepad, click on FILE-SAVE AS. A dialogue box pops up. Type in the file name along with .htm or .html extension in "File name:" text field and select 'All Files' in the "Save as type" drop menu.
Okay, so which extension should you use? .htm or .html? It doesn't matter which one you use but once you've made your choice, be sure to stick to it.
To see the results of your HTML files, you need a browser. There are two major browsers in the market, Internet Explorer from Microsoft and Netscape Communicator from Netscape. A good rule of thumb is to test your HTML code in both these browsers. I follow this extensively and ask you to do the same. Your pages should look and function similar in these two browsers. This is called cross-browser compatibility.
If working under Windows, open Notepad (Start-Programs-Accessories-Notepad).
Now type the following:
<HTML>
<HEAD>
<TITLE>My first HTML page</TITLE>
</HEAD>
<BODY>
This is my first HTML page.
</BODY>
</HTML>
You can also select the above text, copy it by right clicking and paste it in Notepad, but I recommend you type this out. It will help you to understand HTML better.
Now create a new directory on your hard disk. Let's call this "htmlfiles". In Notepad, click "File-Save As" and go to the new directory you have just made. In the drop-down menu, type "first.html". Select "All files" from the "Save as type" drop down menu and click on Save. A screen snap-shot is presented below.
Now open Windows Explorer, come to the new directory "htmlfiles". You shall see your first script. Double click on this. If you have a browser installed on your system, it will open to display this file. If this does not work, open a browser window and click on File-Open (Open Page in Netscape) and select "first.html". Below is a snap shot of Internet Explorer displaying your first script.
Basic HTML tutorial- basic tags
Here is your first script again:
<HTML>
<HEAD>
<TITLE>My first HTML page</TITLE>
</HEAD>
<BODY> This is my first HTML page. </BODY>
</HTML>
Let's analyze this script along with its display.
- The script begins with a <HTML> and ends with </HTML>. These are the starting and the ending tags of the HTML document. Each HTML file has <HTML> as the first tag and </HTML> as the last. These tags are not required but it is always good practice to include them in your document.
- The HTML file has a HEAD and a BODY section. The <HEAD> and </HEAD> tags encompass the head part while the <BODY> and </BODY> surround the BODY.
- You will find an additional starting and ending pair of tags, the <TITLE> and </TITLE> inside the HEAD section, with "My first HTML page" between them. So what is the purpose of this? Look at the display of the document and you shall find that this text is shown on the top, at the Title bar of the browser. Thus, any text between the <TITLE> tags will be displayed here.
- The <BODY> tags contain the meat of the HTML page. In our case, we have the text "This is my first HTML page.". You will notice that this is displayed inside the browser window.
Conclusions:-
- Each HTML document begins with a <HTML> and ends with </HTML> tags.
- Each document consists of a HEAD section surrounded by <HEAD> and </HEAD> tags and a BODY section with <BODY> and </BODY>.
- HTML tags come in pairs (usually) with the ending tag containing an additional "/".
- Some Tags can surround other tags. This is called Nesting. In our case, the <TITLE> tags are nested in the <HEAD>-</HEAD>tags.
- Text inside <TITLE> tags is displayed on the browser Title Bar.
- The text between the <BODY> tags is displayed inside the browser window.
|
