Ankit Virparia » wireframing http://ankit.co A Programmer, Designer and Trainer Sun, 11 May 2014 04:15:47 +0000 en-US hourly 1 https://wordpress.org/?v=4.0.38 Nested table structure. http://ankit.co/tutorials/html/nested-table-structure?utm_source=rss&utm_medium=rss&utm_campaign=nested-table-structure http://ankit.co/tutorials/html/nested-table-structure#comments Sun, 19 May 2013 18:21:27 +0000 http://ankit.co/?p=3478 When the layout is a bit complex, it becomes difficult to create the entire layout using just one table. To create a layout as given below we need to use more than one table tag. Output: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

The post Nested table structure. appeared first on Ankit Virparia.

]]> When the layout is a bit complex, it becomes difficult to create the entire layout using just one table. To create a layout as given below we need to use more than one table tag. 

<html >
<head>
<title>Nested table structure</title>
</head>
<body>
	<table align="center" border="1px" width="900px">
	<tr height="150px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td rowspan="2" width="100px"> 1 </td>
<td colspan="2"> 2 </td>
</tr>
<tr>
	<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
	<td> 5 </td>
</tr>
<tr height="150px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td width="300px"> 6 </td>
<td width="300px"> 7 </td>
<td width="300px"> 8 </td>
</tr>
</table>
</td>
</tr>
<tr height="450px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td width="800px" height="200px"> 9 </td>
<td width="100px" rowspan="2"> 10 </td>
</tr>
<tr>
	<td>
	<table width="100%" height="100%" border="1px">
	<tr>
	<td width="50%" rowspan="3"> 11 </td>
<td colspan="2"> 12 </td>
</tr>
<tr>
	<td rowspan="2"> 13 </td>
<td> 14 </td>
</tr>
<tr>
	<td> 15 </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
	<td> 16 </td>
</tr>
</table>
</body>
</html>

Output:

1 2
3 4
5
6 7 8
9 10
11 12
13 14
15
16

The post Nested table structure. appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/nested-table-structure/feed 0 Div based layout example http://ankit.co/tutorials/html/div-based-layout-example?utm_source=rss&utm_medium=rss&utm_campaign=div-based-layout-example http://ankit.co/tutorials/html/div-based-layout-example#comments Sun, 19 May 2013 17:59:13 +0000 http://ankit.co/?p=3466 In this tutorial we will consider two different layouts using div tag. Layout 1 Output: Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6 Layout 2 Output: Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6 Layer 7 Layer 8 Layer 9

The post Div based layout example appeared first on Ankit Virparia.

]]> In this tutorial we will consider two different layouts using div tag.

Layout 1

<html>
<head>
<title>Div based layout example</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:100px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:100px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:200px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:700px; height:500px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:200px; height:500px; background-color:#9900CC; float:left;">
	Layer 5
</div>
<div style="width:900px; height:200px; background-color:#39C; clear:left;">
	Layer 6
</div>
</div>
</body>
</html>

Output:

Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layout 2

<html>
<head>
<title>Div based layout< example/title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:150px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:150px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:100px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:300px; height:200px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:300px; height:200px; background-color:#666666; float:left;">
	Layer 5
</div>
<div style="width:300px; height:200px; background-color:#CC99CC; float:left;">
	Layer 6
</div>
<div style="width:700px; height:500px; background-color:#00FF99; float:left;">
	Layer 7
</div>
<div style="width:200px; height:500px; background-color:olive; float:left;">
	Layer 8
</div>
<div style="width:900px; height:100px; background-color:#39C; clear:left;">
	Layer 9
</div>
</div>
</body>
</html>

Output:

Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layer 7
Layer 8
Layer 9

The post Div based layout example appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/div-based-layout-example/feed 0 HTML div tag http://ankit.co/tutorials/html/html-div-tag?utm_source=rss&utm_medium=rss&utm_campaign=html-div-tag http://ankit.co/tutorials/html/html-div-tag#comments Sun, 19 May 2013 04:33:45 +0000 http://ankit.co/?p=3439 <div> tag is also used in implementing wireframing. Difference between <div> and <table> based layout Table Div To create one block using table based layout we require 3 tags, they are: one <table> tag to define a table , one <tr> to define one row in the table and one <td> to define one cell […]

The post HTML div tag appeared first on Ankit Virparia.

]]> <div> tag is also used in implementing wireframing.

Difference between <div> and <table> based layout

Table

Div

To create one block using table based layout we require 3 tags, they are: one <table> tag to define a table , one <tr> to define one row in the table and one <td> to define one cell in that row.

To create one block using div based layout we require just one tag and that is <div> tag to define the block.

Number to tags required is more.

Number of tags required is less as just one tag is required to create one block.

Browser parsing is slow.

Browser parsing is fast.

SEO (search engine optimization) rank is low for table based layout.

SEO (search engine optimization) rank is high for div based layout.

Table based layout is controlled by its attributes.

Div based layout is controlled by CSS.

By default when we write a div tag it will not have any border which can separate one block from the other. Also the browser will allocate space according to the content of div.

In order to create a layout using html div tag we need to make use of CSS (Cascading Style Sheet) to assign width and height. We will make use of an inline CSS for controlling div alignments. For further reference on CSS refer article – How to write a CSS?

Consider the below given program to create a div having the following CSS properties : width, height, margin, background-color.

 <div style="width:450px; margin:0px auto; height:100px; background-color:red;">
This is a div.
</div>

Output:

This is a div.

The post HTML div tag appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/html-div-tag/feed 0 Table based website structure http://ankit.co/tutorials/html/table-based-website-structure?utm_source=rss&utm_medium=rss&utm_campaign=table-based-website-structure http://ankit.co/tutorials/html/table-based-website-structure#comments Sun, 19 May 2013 04:09:43 +0000 http://ankit.co/?p=3427 As we have understood wireframing in the previous tutorial, now we are going to implement it it using <table> tag. Consider the layouts given below. Layout – 1 Output: 1 2 3 4 5 5 Above layout consist of four rows and two columns. Layout – 2 Output: 1 2 3 4 5 5 Layout […]

The post Table based website structure appeared first on Ankit Virparia.

]]> As we have understood wireframing in the previous tutorial, now we are going to implement it it using <table> tag.
Consider the layouts given below.

Layout – 1

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td> 2 </td>
</tr>
<tr height="50px">
<td colspan="2">3</td>
</tr>
<tr height="400px">
<td width="200px">4</td>
<td>5</td>
</tr>
<tr height="100px">
<td colspan="2">5</td>
</tr>
</table>

Output:

1 2
3
4 5
5
  • Above layout consist of four rows and two columns.


Layout – 2

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="2"> 2 </td>
</tr>
<tr height="50px">
<td colspan="3">3</td>
</tr>
<tr height="400px">
<td colspan="2">4</td>
<td width="200px">5</td>
</tr>
<tr height="100px">
<td colspan="3">5</td>
</tr>
</table>

Output:

1 2
3
4 5
5

Layout – 3

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="4"> 2 </td>
</tr>
<tr height="50px">
<td colspan="5"> 3 </td>
</tr>
<tr height="200px">
<td colspan="2"> 4 </td>
<td width="300px"> 5 </td>
<td colspan="2"> 6 </td>
</tr>
<tr height="400px">
<td colspan="4"> 7 </td>
<td width="200px"> 8 </td>
</tr>
<tr>
<td colspan="5"> 9 </td>
</tr>
</table>

Output:

1 2
3
4 5 6
7 8
9

Above layout consist of 5 columns and 5 rows. We can assign width attribute to cell 1, cell 5 and cell 8 as these are the only cells which do not merge more than one cell.

Rules to follow while designing Table based website structure having multi browser compatibility

  • We should not assign width to a cell whose colspan attribute is assigned
  • We should not assign height to a cell whose rowspan attribute is assigned
  • Width can be assigned to <table> and <td> tags.
  • Height can be assigned to <table> , <tr> and <td> tags.
  • If we do not write some content in between <td> and </td> then browser will not allocate space for that cell.

The post Table based website structure appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/table-based-website-structure/feed 0 What is website wireframing? http://ankit.co/tutorials/html/what-is-website-wireframing?utm_source=rss&utm_medium=rss&utm_campaign=what-is-website-wireframing http://ankit.co/tutorials/html/what-is-website-wireframing#comments Sun, 19 May 2013 03:47:36 +0000 http://ankit.co/?p=3417 Wireframing is a method by which we decide the position of various modules in our website design. Example of different modules in a general website are login , search, menu, logo, footer etc.. It is also known as website template or website structure. Let us consider the below given template to understand: “What is website […]

The post What is website wireframing? appeared first on Ankit Virparia.

]]> Wireframing is a method by which we decide the position of various modules in our website design. Example of different modules in a general website are login , search, menu, logo, footer etc.. It is also known as website template or website structure.
Let us consider the below given template to understand: “What is website wireframing?” :

Logo Here Search Bar Here
Menu Here
Main Text News
Footer Here


In the above layout we allocate space for displaying logo of a company, space for search module, space for displaying menu, space for displaying events and also place for footer.

Deciding width of a website:

An important question while designing a website is that what must be its resolution. As a standard practice we should decide the width of our website in the range of 900px to 1200px.
Why so?
The standard resolution of a monitor is 1024×768 pixels. If we develop a website which is larger than 1024px width and even if any user opens that website in a full screen browser then also browser will generate horizontal scroll bar at the bottom. As we don’t have horizontal scroll button on our mouse device, it will be inconvenient for the users to access such site. That is why we extend our webpage in terms of height and not in terms of width.
Now-a-days we are familiar with HD monitors having resolution of 1440px and above. Taking into consideration the target audience it is recommendable to have the width of our website between 900px to 1200px.

Note :- Another approach to develop a website is by occupying 100% of width available with the browser resolution eg. Google, Gmail.

The post What is website wireframing? appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/what-is-website-wireframing/feed 0