Create Your First Web Page Using HTML

Published on April 6th, 2013 by | Category: Programming

HTML stands for Hyper Text Mark-up Language; yeah, that’s right, HTML is not a typical programming language like C/C++, it’s rather a mark-up language. Mark up tags like <font></font> and <b></b> are used in html to describe the content on your page.

To design your first web page requires no sophisticated software or hardware; text editor like “Notepad” for Windows users and “Simple Text” for Mac users with a web browser installed would suffice.

Here are the 3 steps-to-take to create your first web page using html, 4th being opening and viewing of the web page. For each of the steps, first I would ask you to enter the text as it is, on your text editor, the purpose of that segment or line of the code will be told later.

Step # 1: Let the browser know which language you are using to code

Start coding. The first line of code would be,

Whatever content would be placed and whatever content description tags would used; in fact, all the coding we would be doing from now onwards would be done between these two tags. The tag without slash is called opening tag while that with slash is the closing tag.

Your content and content description comes here.

Saving this document as html file now will be of no use except that it would let the browser know that the web page’s being coded in html; nothing would be made visible in your browser window until you add the body section.

Step # 2: Add the “head” block

The next step is to add the “head” block; again it’s a pair of tags,

This block would contain a lot of information about your web page but nothing’s going to be displayed on your web page. The information that’s going to be added here, also called META tags would be used by search engine spiders to search your web page.

Let’s add a title to our page. Since, the title tag is added inside the “head” block, this is not the title that would be displayed on your web page but is the one that would tell the search engine spiders what your web page is about.

</p> <p>My first web page.</p> <p>

You might be wondering now that where you are going to put the content that would actually be viewed on your web browser’s window. The body block’s used for that purpose.

Step # 3: Add the “body” block

Like all the other tags of html, body tag also comes in pair.

<br /> My first web page.<br />

Whatever’s placed between the opening and closing tags of the body tag, will be viewed by you or your visitors on your webpage.

Let’s put something in the body section of the document,

Welcome to my site

“h1” here stands for 1st heading. On your web page you would need to use headings as well as sub headings; <h2></h2>, <h3></h3> and so on will be used for subsequent headings.

Now, if you want to align this heading to the center of the page, div tag will be used; body section would look like,

Welcome to my site

You may add few paragraphs in your body section and align them the way you like:

Your 1st paragraph goes here.

Your 2nd paragraph goes here.

Your 3rd paragraph goes here.

The coding we have been doing up till now, part of which is going to be viewed is called “web document” while the content that’s actually viewed in the web browser is called the “web page”.

Step # 4: Saving the file and viewing it

Once, you have typed the code in your text editor, it’s time to save it and view the web page on your web browser. In the “File” drop down, select “Save As”; in the new window that appears, before renaming and selecting the desired location to save that file, change “Save as type” from “Text documents (*.txt)” to “All Files”. Now, save your web document as “myfirstpage.html”.

To open and view the file, access the location where you have saved the “*.html”, you would notice that the icon of the file you just saved has been changed to look like the icon of your default web browser. Even if it’s not changed, right click and open it with any web browser available like Internet Explorer, Mozilla Firefox or Opera.

It seems that the effort you have made has paid off. Well, this was just to show you a direction. To make it better looking, you may add pictures, background color, background images; in fact all types of stuff that you might have seen on a well developed website. I would like to share here some invaluable resources that helped me while I was learning html.

To make any further change to the code, select “Source” from the “View” drop down, this will open the code in a notepad window, make your changes and “Save” them. You don’t need to go through that “Save As” drill every time you make a change to your code. Click on “Refresh” or “Reload” button in the menu bar of the Internet Explorer to view the changes made.

Make sure to read this article too: Basic HTML Syntax

Leave a Reply

Your email address will not be published. Required fields are marked *