HTML TUTORIAL

We will do a quick start by creating our first simple html file.

Open a text editor and copy paste the following code in the text file.

Your First HTML Page 


<html>
<head>
<title>Reference Designer Title </title>
</head>
<body>
My first html Page.<i>This text is italics</i>
</body>
</html>

Save the file as, let us say newpage.html. If you are using a notepade make sure you select "All files" in "save as type". otherwise the file will be saved as newpage.html.txt and it will not be a valid html file.

A note on viewing extention of files on Windows.
By default, Windows does not display the extension of the files. But you can make is viewable using Organize -> Folder and Search Options -> Uncheck "Hide Extension for known file types".

After you save the file, you can double click the file and it will open in the browser.

Alternatively, you can open the internet browser and select "FIle" -> "Open File" and point to the file you just edited ( newpage.html).

Explanation


The <html> tells that this is the start of the html page. If you look at the end of the code, you will find </html> which tells that this is the end of the html.

The text between the <head> tag and the </head> tag is header information. Whatever written in the header section is not displayed in the browser section. The Head section is for the technical information about the page and for displaying the title. We will learn in the javascript tutorial, that, the head section is also the place where we can place javascript functions.

The <title> tells the start of the title section. The title is displayed in your browser's caption.


The text between the <body> tags is the text that will be displayed in your browser.

The text between the <i> and </i> tags will be displayed in a italics font.


Reference Designer Examples


You can use the following link to modify the HTML code and see the result.

Example - My First HTML Page

You may also check this youtube video that walks through the process.



Exercise



1. In the above html page, make changes so that the title says - "Learning HTML"
2. Change the text "My first html Page. <i>This text is italics</i>

Most of the HLML learning is nothing but trying out more and more examples. In the following chapters we will be bringing more and more examples for your learning.