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:

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.

Example:

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

Above code provides following output:

Ghumkumar

Paragraph:

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

Example:

<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.

Div:

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.

Example:

<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:

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

Span:

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.

Example:

<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:

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…. 🙂