Tag Archives: Breakthrough Technology

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>

HTML Attributes

Many HTML tags have a unique set of their own attributes. These attributes are divided into core attributesinternationalization attributes, and scripting events. Attributes are always specified in the start tag and come in name/value pairs like: name=”value”

Example

<a href="http://www.a2zwebhelp.com">Link to my website.</a>
<p id="firstp">This is my first paragraph.</p>
<h2 align="center" title="center text">Centered Heading</h2>

HTML Attributes with category

Category Attributes Name
Core Attributes id <p id=”myid”>My Text.</p>
class <div clsss=”newclass”> Text </div>
name <form name=”arup”></form>
style <span style=”font-family: arial”> Arial</span>
title <h1 title=”Heading”> Heading </h1>
alt <img src=”” alt=”my image”>
align <p align=”left”></p>
valign <td valign=”top”>&nbsp;</td>
bgcolor <td bgcolor=”#808080″>&nbsp;</td>
background <td background=”filepath”>&nbsp;</td>
width <img width=”100px”>
height <img width=”100px” height=”100px”>
Internationalization Attributes LANG <span lang=en>Welcome</span>
DIR
Common Scripting Events ONCLICK mouse button is clicked on an element.
ONDBLCLICK mouse button is double-clicked on an element
ONMOUSEDOWN mouse button is pressed over an element
ONMOUSEUP mouse button is released over an element
ONMOUSEOVER mouse is moved onto an element
ONMOUSEMOVE mouse is moved while over an element
ONMOUSEOUT mouse is moved away from an element
ONKEYPRESS a key is pressed and released over an element
ONKEYDOWN a key is pressed down over an element
ONKEYUP a key is released over an element

Media Width/ Device Width

Responsive Web Design Media Width Viewport Size

The Following table shows screen resolution for different devices. For more detail please visit wikipedia. It is always better to write your media query in your CSS file for the following resolutions. 320px, 480px, 600px, 800px, 960px, 1024px and 1280px+. Click here to know how to crate a css file for responsive web design.

Device Name With Resolution
Company Model Diagonal
cm/in
Resolution Viewport
Apple iPad – 1st Gen, 2 25 (9.7) 1024 x 768 768 x 1024
Apple iPad – 3rd Gen, 4th Gen 25 (9.7) 2048 x 1536 768 x 1024
Apple iPad Mini – 1st Gen 20 (7.9) 1024 x 768 768 x 1024
Apple iPhone 4 / iPod Touch 8.9 (3.5) 960 x 640 320 x 480
Apple iPhone 4S / iPod Touch 8.9 (3.5) 960 x 640 320 x 480
Apple iPhone 5 10 (4) 1136 x 640 320 x 568
Apple iMac 21.5-inch 55 (21.5) 1920 x 1080 1920 x 1080
Apple iMac 27-inch 69 (27) 2560 x 1440 2560 x 1440
Blackberry BlackBerry PlayBook 18 (7) 1024 x 600 600 x 1024
Blackberry BlackBerry Z10 11 (4.2) 1280 x 768 345 x 521
Nokia Lumia 710 9.4 (3.7) 800 x 480 320 x 480
Motorola Motorola Defy 9.4 (3.7) 854 × 480 320 x 569
Motorola Motorola Droid 9.4 (3.7) 480 x 854 360 x 599
Motorola Motorola Droid Razr 11 (4.3) 540 x 960 360 x 640
Motorola Motorola Razr HD 4G 12 (4.7) 720 x 1280 360 x 598
Motorola Motorola Milestone 9.4 (3.7) 480 x 854 320 x 569
Motorola Motorola Xoom 25.7 (10.1) 800 x 1280 800 x 1280
Nokia Lumia 800 9.4 (3.7) 800 x 480 320 x 480
Nokia Lumia 820 11 (4.3) 800 x 480 320 x 480
Nokia Lumia 900 11 (4.3) 800 x 480 320 x 480
Nokia Lumia 920 11 (4.5) 1280 x 768 320 x 480
Nokia Lumia 1020 11 (4.5) 1280 x 768  –
Samsung Galaxy W (I8150) 9.4 (3.7) 480 x 800  –
Samsung Galaxy S 10 (4.0) 480 x 800 320 x 534
Samsung Galaxy SII 10.8 (4.27) 480 x 800 320 x 533
Samsung Galaxy S III (I9300) 12 (4.8) 720 x 1280 360 x 640
Samsung Galaxy S4 (I9500) 13 (5) 1080 x 1920
Samsung Galaxy Nexus 11.8 (4.65) 720 x 1280 320 x 532
Samsung Galaxy Tab 18 (7) 600 x 1024 600 x 1024
Samsung Galaxy Tab 7.7 20 (7.7) 800 x 1280 800 x 1280
Samsung Galaxy Tab 10.1 26 (10.1) 800 x 1280 800 x 1280
Samsung Galaxy Note 13 (5.3) 800 x 1280 400 x 640
Samsung Galaxy Note II 14.1 (5.55) 720 x 1280 360 x 640
Samsung Galaxy Note 10.1 26 (10.1) 1280 x 800 800 x 1280
Sony Sony Vaio Z92 33 (13.1) 1600 x 900
Sony Sony Vaio Z128 33 (13.1) 1920 x 1080
Sony Sony Vaio F series 42 (16.4) 1920 x 1080
Sony Xperia S 11 (4.3) 720 x 1280 360 x 640
Sony Xperia Sola 9.4 (3.7) 480 x 854 320 x 569
Sony Xperia U 8.9 (3.5) 854 x 480 320 x 569
Sony Xperia Ion 11.6 (4.55) 720 x 1280
Sony Xperia Z 13 (5) 1920 x 1080 360 x 598
Sony Xperia E 8.9 (3.5) 320 x 480 320 x 480

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