HTML Introduction, Sample HTML Page

HTML Introduction

HTML is acronym of Hyper Text Markup Language. As the name suggests it is used to place and style texts on a webpage.
Now-a-days maximum of styling and positioning is done by Cascading Style Sheets (CSS). However HTML can not be ignored, because CSS in itself is incomplete without HTML. There should be nothing like CSS Versus HTML. In fact HTML and CSS go together.
Basically all the content and markup is placed in a text file. This text file has an extension .html or .htm.
That’s all for the introduction of this markup language. Now let us move ahead to our first HTML page.

First HTML Page

You will create your fist HTML page in three easy steps. Do not bother if you do not understand anything. Everything will be explained later.
Step 1: Open any text editor on your machine (like notepad on Windows machine). Type or copy-paste the following lines of code in it.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>This is the output of my first HTML page!</h1>
</body>
</html>

Step 2: Save the text file as first.html

Step 3 : Now open any browser installed on your machine. And type the path of the text file in it. Press enter. Hooray! You just created your first HTML page!

Explanation of Steps

Step 1: HTML is the easiest language on earth. Unlike other scripting languages, HTML does not need any parser except the browser. The browser is the whole n sole interpreter in case of HTML. You just have to pass it a file with extension “.htm” or “.html”. Off course, the content of the file should be HTML. Due to this facility, we just have to create a valid HTML file with proper extension. We do this by opening a text-editor like notepad and typing the source code into it. The file is created by HTML in step 2.

Step 2: As soon as we save the file with extension .html or .htm, the text editor creates a file on the disk with proper extension. All which is left now is just using the interpreter as done in step 3.

Step 3 : The browser is the software which interprets an HTML file. An HTML file is passed to it by entering the URL, or web address or path of the file. That is why we wrote the path of our first.html file in the address bar of the file and pressed the “Go “button or “Enter” key. Pressing the Enter key invokes the browser and it reads the file entered in the address bar.

Code Explanation

the HTML markup is placed between tags. Every valid HTML page has two sections, namely Header and Body. These two regions are specified by and tags.

Inside the head section we put the followings.

  • The Meta information [These are information regarding the content of the page] A deeper analysis of this will be done when we describe the tag.
  • The style sheet declaration
  • The client side scripting code

The title of the page
- All the information written inside the header section is not visible except the title. Did you notice this? Ok, whatever you write inside the <title></title> tag, is displayed on the close-bar in left. So confirm it whether the HTML title ‘My First HTML Page’ is visible. If it’s not visible then may be you have done something wrong while typing the code.

- All the visible texts, images or objects are placed inside the body section of the html file. In the example above the displayable text is put inside the <h1></h1> tags. This tag tells the browser that the content within this tag is heading. Hence the browser displays it as a heading. Now the basics are done. Let’s move ahead to the next section where we will learn about HTML Tags.

  • 1622 reads