Basic HTML – Part 1

Well.. I was supposed to take a short class for my developer group in a recent project. I thought I’d rather post the topics and some detail of that class here, which can help beginners.

First of all, we are going to learn some keywords and their use:

  • HTML – Hyper Text Markup Language.
    • Used to write web pages. Browsers understand this language. You have to talk with web browsers in this language.
  • Tags
    • Tags are used to distinguish different elements in a web page. As an example, we’d use the anchor tag (<a>) to define anchor or links.
  • CSS – Cascading Style Sheet
    • CSS is used to define style for a web page. We’d learn about CSS in a later session.
  • Scripts
    • Scripts are some programming language which helps to interact a web page with user and server. PHP, JavaScript etc. are commonly used scripts in web development.

Now I’m going to explain some rapidly used tags here.


Anchor tag is very important. We use this to link some other page or website using this tag. Attributes of anchor tags are: ‘href’, ‘title’, ‘onClick’ etc. href defines the target of the anchor; title has the definition of the link and onClick is used to define some JavaScript click action for that link.


<a href="" title="Ghumkumar Website" onClick="javascript:alert('Link Clicked!')">Ghumkumar</a>

Above code provides following output:



Its an important tag. Texts in an web page are placed inside paragraphs. This makes it easy to manipulate and stylize.


<p style="border:1px solid #CCCCCC; margin: 3px;>Loream ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dui. Aenean nec odio sit amet nisi faucibus euismod.</p>

Above code will provide following output:

Loream ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dui. Aenean nec odio sit amet nisi faucibus euismod.


This is another most important tag. This tag is used to divide your web page in different parts. You can specify styles to a div tag; provide id and manipulate it using JavaScript. General attributes of a div tag are: ‘id’, ‘position’, ‘float’ etc. You can place a div any where of your website.


<div id="example1" style="position: relative; width:100%; height:50px; float:right; background: #CCCCCC; color:#000000; border: 1px dashed #FFFFFF; font-size: 15px; display: block; clear: both; margin-bottom: 15px;">This is an example div tag with some popular styling</div>

Above code will produce following output:

This is an example div tag with some popular styling

Now you can access the above div with its id ‘example1’ and add any action.


The last topic of this session. This tag is used to differentiate a small part inside another part. Suppose a block of text inside a large div.


<div>Hello there! <span style="font-weight:bold">This text is inside span!</span> You are watching an use of span tag.</div>

Will produce:

Hello there! This text is inside span! You are watching an use of span tag.

Hope thats enough babbling for today. I’ll produce some more on next session 😀

Learn more HTML and other web programming from this amazing website: W3Schools

Take care…. 🙂

Published by Ashiqur Rahman

Programmer and photography enthusiast.

Join the Conversation

No comments

Leave a comment

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