How to open and save a HTML file.

HTML Introduction

HTML stands for Hyper Text Markup Language. It is a markup language. HTML is used to write web pages. It only defines what is to be displayed and not how all the elements are formatted. HTML contains elements or tags that are enclosed in angle brackets (<html>). You can use HTML to display text, images and videos on a web page and even play audio files.

How to write and save a HTML file.

If you downloaded and installed any of the text Editors mentioned in the previous post any one of them. If you haven’t downloaded any text editor, then you can use Notepad which is a pre-installed text editor in Windows.
It’s time to write your first web page. In the Menu Bar click on File->New/ New File. This will open a new empty document.
Copy and paste the code written below (Don’t worry I will explain each and every line of the code later.)
Now to save this file as an html document, Go to File->Save As.
Now the most important thing is to add the .html at the end of the file name so that all the browsers can know that this is a HTML file.
So lets assume you want to name the file as ‘firstpage’, so save it as firstpage.html.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Page Title</title>
 </head>
 <body>
  <h1>First Heading</h1>
  <p>Your first paragraph.</p>
 </body>
</html>

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>First Heading</h1>

<p>Your first paragraph.</p>

</body>

</html>

How to open a HTML file.

Now go to the location where you saved this file.
To open a HTML file you need a browser.
Right click on the .html file, and choose open with and select any browser that you want to view your page in.

When you will run this .html file in a browser you will get a similar output.

first html page

Is HTML cases sensitive?

No. HTML is case insensitive. Which means that <html> and <HTML> mean the same thing and both are valid. But usually it is a good practice to write all your HTML code in lowercase as it looks more tidy and is easier to understand. Some things like the id and class attributes are case sensitive which we will talk about later.

What does the above code do?

In the next series of posts I will explain each and every line of the above code in details. But now lets look at a few lines and what they do.

The text between the <title>Page Title</title> is the text that goes at the top of the browser Tab.

The text between the <h1>First Heading</h1> describes the heading and is displayed as bold text with big font size.

The text between the <p>The first paragraph</p> contains the content of a paragraph and is displayed with normal size (16px).

Facebook

Twitter

Google+