Tag Archives: Business Solutions

HTML Meta Tags

HTML Meta Tages can be used to specify additional metadata about a document, such as author,publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs.

Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client

Example

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

Adding Meta Tags

You can add metadata to your web pages by placing <meta> tags between the <head> and </head>tags. The can include the following attributes:

Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content Specifies the property’s value.
scheme Specifies a scheme to use to interpret the property’s value (as declared in the content attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to refreshthe page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

More Examples

This meta element defines a description of your page:

<meta name="description" content="Web Tutorials on HTML, CSS">

This meta element defines keywords for your page:

<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript" />

The date and time after which the document should be considered expired:
Web robots may delete expired documents from a search engine, or schedule a revisit.
Dates must be given in RFC850 format, in GMT. E.g. (META tag):

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT" />

The HTTP content type may be extended to give the character set.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-2022-JP" />

Specifies the default scripting language in a document:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript" />

Specifies the default style sheet language for a document:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css" />

Declare the natural language of the document:

<META HTTP-EQUIV="Content-Language" CONTENT="en-GB" />

Specifies a delay in seconds before the browser automatically reloads the document:

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://www.some.org/some.html"/>

Refresh the page every 5 seconds:

<meta http-equiv="refresh" content="5" />

Specifies the named window of the current page; can be used to stop a page appearing in a frame with many (not all) browsers:

<META HTTP-EQUIV="Window-target" CONTENT="_top" />

Controls Web robots on a per-page basis:

<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW" />

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (<tr>), and each row is divided into cells (<td>). The cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Example:

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

Tables and the Attribute:

Border: If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1">
 <tr>
   <td>&nbsp;</td>
 </tr>
</table>

Width: You can specify the width of the table either in percentage or pixel.

<table border="1" width="100%" >
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Cellspacing/ Cellpadding:

<table border="1" width="100%" 
cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

HTML Lists

To create bulleted lines of text you can use HTML lists. Unordered lists (bullets), ordered lists (numbers) and definition lists (think: dictionaries) are three different types of HTML Lists.
Click here to know how to styling List in CSS.

Unordered lists (bullets): The <ul> tag

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java Script</li>
   <li>PHP</li>
</ul>

The different type of Unordered list are square, circle and disc.

<ul type="square">
<ul type="circle">
<ul type="disc">

Numbered/Ordered List: The <ol> tag

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java Script</li>
    <li>PHP</li>
</ol>

The different type of Numbered list are letters and Roman Numbers.

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

You can also change the start number

<ol start="7">

Definition Term Lists: The <dl> tag

<dl> – opening clause that defines the start of the list
<dt> – list item that defines the definition term
<dd> – definition of the list item

<dl>
   <dt>HTML</dt>
   <dd>- Hyper Text Markup Language</dd>
   <dt>CSS</dt>
   <dd>- Cascading Style Sheets</dd>
</dl>

Responsive web design (RWD)

What is responsive web design?

In very simple language the website which fit in any resolution with the help of CSS is know as responsive web design. Now a days mobile and tablet users are increasing day by day, So you need to create such a web site which fit in all media. You can create responsive web page with the help of HTML5 and CSS3. Before designing your web page keep it in your mind that each and every part of your web site need to be responsive / auto resizable as the browser width changes. Photo gallery, image stroller, top menu, footer links every thing should be resizable.

How to create responsive web design?

With the help of CSS3 media queries you can create responsive web designs. CSS3 media queriesaccept AND, NOT with features like width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution etc.

There are three way to implement media queries:

1. Using @import rule
2. Writing Media Queries Directly in a Style Sheet
3. Include a query in a linked style sheet’s media attribute
Using @import rule
@import url(style600.css) screen and (min-width: 600px);
Writing Media Queries Directly in a Style Sheet
@media screen and (min-width: 600px){
  #section{
     width: 550px;
  }
}
Include a query in a linked style sheet’s media attribute
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 600px)" href="style600.css" />

Viewport in meta tag

Another important option in Responsive Web design is defining Viewport in meta tag. Viewport meta tag is used to control layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1">

Viewport Width

Many sites set their viewport to “width=320, initial-scale=1″ to fit better in iPhone, or other device having viewport 320. Please note that the screen resolution is not always same as viewport. Click here to see screen resolution and viewport of different devices.
<meta name="viewport" content="width=320, initial-scale=1">

Viewport width and Screen width

Flash Design & Presentations

“IWCn has the mastery over Flash Animation tools and given it a new identity..”

BREAKTHROUGH TECHNOLOGY

IWCn has the ability to actively engage your browsers by capturing their attention in a unique and interactive way that standard HTML sites cannot. We employ techniques that allow search engines to crawl your Flash website, helping you improve your ranking so browsers will find you and discover rich entertaining content that will help convert browsers into customers.

Continue reading