Login
Password

Forgot your password?

Getting Started with HTML

By Edited Oct 27, 2013 1 2

HTML, what does it stand for? Thats the first question that pop's up in ones mind before we go in any further and jump on starting up the tutorial. It stands for Hyper Text Markup Language. Its a pretty easy language, all we need is the right kick start. HTML is used to display the content of web pages. Its the language the Browser reads to display your web content and graphics correctly to the end user. The text in the HTML document is presented using brackets , a tag

is used to mark the start of a paragraph and

is used to mark the end of a paragraph. All we have to do is create an HTML text document and place it on a web server, practically anywhere in the world ( India, Mauritius, Syria... Guantanamo Bay :)), and as soon as you type in the web address, the pages are read by the web browser and the web page is displayed. Lets start with a very simple way of learning HTML and creating a simple webpage on your computer.

Things You Will Need

All you need is a Notepad application on your system. :).

Step 1

Lets give a title for our Document, lets go with " Lets Begin to Rock HTML". You can give any title practically. But the title has to be placed between tags

<title>Lets
Begin to Rock HTML</title>

The title is displayed in the windows caption bar. Want to experiment what your page looks like now? Just save the Notepad file as Test.Html or Test.htm and open it in a web browser. Click on internet explorer and open a browser. Now click on File --> Open--> Browse. Now Browse the file that you saved a Test.Html or you can just double click on the test.html file. A blank page will be displayed with the caption bar having 'Lets Begin to Rock HTML'


Step 2

If you like to add Paragraphs and a heading for each paragraph then here is how you do it. Up to six levels of headings can be created. Use

<h1>
tag to create the first level top heading,
<h2>
would be next level and so on.
<p>
is the tag used for paragraphs. Let's write a Paragraph which has a heading and a sub heading.

<h1>
First Level of Heading </h1>

<p>
We are here to Rock HTML and learn to write the basic code for a page. We will
incorporate full dedication and learn our lessons. We will take up the task and
deliver very good web pages to the whole world </p>

<h2>
Second Level of Heading </h2>

<p>
HTML means Hyper Text Markup Language </p>

Hereby we added a heading a subheading and two paragraphs. Lets see how our webpage looks now. Save the text.Html file and open it in web browser. The given image shows the content of the web browser once it is opened.


Step 3

Adding images is the fun part of HTML. Place your test.html in a folder on your desktop or anywhere you would like to get organized. Now place another image file in the same folder. Lets say 'image.jpg'. Now If you would like to add this image to your webpage add the following line of code anywhere you want it to appear.

<img src="Image.jpg"
width="400" height="300" alt="My first Image"
> 

Here img src is the source of Image file which means the name. the width and height of the image are given to specify the image size. We can get more detailed by giving a description to the Image and adding more attributes but lets keep this simple.

I would like it after the first Heading and first paragraph. So here is the Code for it

<h1> First Level of
Heading </h1>

<p> We are here to Rock
HTML and learn to write the basic code for a page. We will incorporate full
dedication and learn our lessons. We will take up the task and deliver very
good web pages to the whole world </p>

 <img src="Image.jpg"
width="400" height="300" alt="My first Image"
> 

<h2> Second Level of
Heading </h2>

<p> HTML means Hyper Text
Markup Language </p>

Now save the above code and open test.html. You will see the image being displayed.


Step 4

You can add links of other websites and allow the user to navigate to the other site from your HTML page. The tags used are

<a>
and
</a>

Here i a link to my web page on inforbarrel

<a href ="
http://www.infobarrel.com/Users/vaidehiseshu"> vaidehiseshu
</a>

When you save this in the test.html and open the web page, you dont see the entire link but you see the 'WebPageName' given above in the code as the link.


Step 5

Every HTML page has Head and Body. If you look at the Source code on any page by going to View--> Source, you see that it starts with the version of Html used and then

<html>
tag followed by
<head>
and
<body >
Our test.html can be modified to look like this with Head and Body along with Version information

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"

http://www.w3.org/TR/html4/loose.dtd>

<html>

<head>

<title>Lets Begin to
Rock HTML</title>

<head>

<body>

<h1> First Level of
Heading </h1>

<p> We are here to Rock
HTML and learn to write the basic code for a page. We will incorporate full
dedication and learn our lessons. We will take up the task and deliver very
good web pages to the whole world </p>

 <img src="Image.jpg"
width="400" height="300" alt="My first Image"
> 

<h2> Second Level of
Heading </h2>

<p> HTML means Hyper Text
Markup Language </p>

<a href ="
http://www.infobarrel.com/Users/vaidehiseshu"> vaidehiseshu
</a>

<body>

<html>


We have created a simple HTML page with Images and links to websites, now you can take this to an all new level by exploring about various attributes in HTML like font color, font size and adding more pictures and so on. Try building your own website and hosting pictures of your family and friends. Happy Web Development!

Tips & Warnings

Cascading Style Sheets can be used for Advanced HTML styling, here is the link CSS HTML Tidy can be Used to fix errors in HTML link HTML Tidy To Edit HTML directly Netscape Composer or W3C's Amaya can be used.
Advertisement

Comments

Jan 29, 2009 5:42pm
greg
CSS is waaaaay better. Tables are awful!
Jan 27, 2012 12:51am
Girishsingh
Really nice basic information about HTML
Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology