Ankit Virparia » Tutorials

Nested table structure.

Ankit Virparia — Sun, 19 May 2013 18:21:27 +0000

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.



Nested table structure


	
	
	
	
	
	 1 
 2 


	 3 
 4 





	 5 


	
	
	
	 6 
 7 
 8 





	
	
	
	 9 
 10 


	
	
	
	 11 
 12 


	 13 
 14 


	 15 








	 16

Output:

1	2
	3	4

11	12
	13	14
		15

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

Div based layout example

Ankit Virparia — Sun, 19 May 2013 17:59:13 +0000

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

Layout 1



Div based layout example


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4


	Layer 5


	Layer 6

Output:

Layer 1

Layer 2

Layer 3

Layer 4

Layer 5

Layer 6

Layout 2



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>
</pre>
<p><b>Output:</b></p>
<div style="width:500px; background-color:black; ">
<div style="width:100px; height:150px; background-color:red; float:left;">Layer 1</div>
<div style="width:400px; height:150px; background-color:green; float:left;">Layer 2</div>
<div style="width:500px; height:100px; background-color:yellow; clear:left;">Layer 3</div>
<div style="width:166px; height:200px; background-color:blue; float:left;">Layer 4</div>
<div style="width:166px; height:200px; background-color:#666666; float:left;">Layer 5</div>
<div style="width:168px; height:200px; background-color:#CC99CC; float:left;">Layer 6</div>
<div style="width:400px; height:500px; background-color:#00FF99; float:left;">Layer 7</div>
<div style="width:100px; height:500px; background-color:olive; float:left;">Layer 8</div>
<div style="width:500px; height:100px; background-color:#39C; clear:left;">Layer 9</div>
</div>
<p>The post <a rel="nofollow" href="http://ankit.co/tutorials/html/div-based-layout-example">Div based layout example</a> appeared first on <a rel="nofollow" href="http://ankit.co">Ankit Virparia</a>.</p>

</article>
<article>
<h1>DIV based website structure</h1>
<p>Ankit Virparia — Sun, 19 May 2013 17:23:46 +0000</p>
<p><strong>Let us consider  that we want to create a layout as given below: </strong><br />
  <center></center> <br />
  For creating  this layout we require 5 <div> tags. One outer <div> tag and 4  inner <div> tags. The code for above layout is given below. Outer  <div> tag is used to hold the layout to maintain proper formatting. </p>
<pre class="brush: xml; title: ; notranslate">
<html>
<head>
<title>DIV based website structure


 

Layer 1


Layer 2


Layer 3


Layer 4

Output of above code is given below.

Layer 1

Layer 2

Layer 3

Layer 4

Unlike table there are no rows and no columns. So each block created by

tag will be displayed one below the other. To create the desired layout we need to use two properties of CSS know as float and clear.
Floating creates layers. When we are considering relative positioning of layers then there are 3 layers : base, float:left and float:right. When we give float:left to a layer the base layer will be overlapped by the contents of the left floating layer. In the above code we will now give float:left to Layer 2 and Layer 3.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Output:

Layer 1

Layer 2

Layer 3

Layer 4

But now Layer 4 is not visible. Layer 4 is displayed below Layer 2 and Layer 3 as it will not wait till floating is over. If we want Layer 4 to wait till floating of previous layers to complete and then display, we need to use clear property of CSS. It has three values : left, right and both. Clear:left will wait for floating to get over and then display.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Output:

Layer 1

Layer 2

Layer 3

Layer 4

Let us consider a variation in the above code. We now change the width of Layer 3 from 800px to 600px.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Layer 1

Layer 2

Layer 3

Layer 4

As we have reduced the width of Layer 3 now base layer is visible. We now give float:right to Layer 3. As a result Layer 3 will be floated to the right.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Output:

Layer 1

Layer 2

Layer 3

Layer 4

The base layer is now visible in between Layer 2 and Layer 3. Another variation is to decrease height of Layer 2 from 700px to 500px.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Output:

Layer 1

Layer 2

Layer 3

Layer 4

As Layer 4 will only wait for left floating therefore once left floating of Layer 2 is over immediately Layer 4 is attached below it. Layer 4 will not wait for Layer 3 as it is floated right. We have to set clear:both so that Layer 4 will wait till both the layers have completed floating.



DIV based website structure


		

	Layer 1


	Layer 2


	Layer 3


	Layer 4

Output:

Layer 1

Layer 2

Layer 3

Layer 4

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

HTML div tag

Ankit Virparia — Sun, 19 May 2013 04:33:45 +0000

tag is also used in implementing wireframing.

Difference between

and based layout

Table

Div

To create one block using table based layout we require 3 tags, they are: one

tag to define a table , one to define one row in the table and one

to define one cell in that row.	To create one block using div based layout we require just one tag and that is 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.

 
This is a div.

Output:

This is a div.

The post HTML div tag appeared first on Ankit Virparia.

Table based website structure

Ankit Virparia — Sun, 19 May 2013 04:09:43 +0000

As we have understood wireframing in the previous tutorial, now we are going to implement it it using

tag.
Consider the layouts given below.

Layout – 1

1	2
3
4	5
5

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 – 3

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 and

tags.

Height can be assigned to , and then browser will not allocate space for that cell.

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

What is website wireframing?

Ankit Virparia — Sun, 19 May 2013 03:47:36 +0000

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

tags.

If we do not write some content in between

and

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.

HTML table tag

Ankit Virparia — Tue, 14 May 2013 05:56:02 +0000

What is a table?

Table is a structure which is used to store two dimensional information (eg. Excel)
It is a combination of rows and columns.

Characteristics of tabular data

Width of all columns will be same.
Height of all rows will be same.
Number of columns in each row should be same.
When we store any tabular information, generally the first row represents name of the column.

HTML table tag

For creating a table in html mainly four tags are used. The tags are as follows:

– used to define the structure of the table

– used to define a row of the table.

– used to define the header of the table.

– used to define individual cells of the table.

Suppose we want to create a table of size 2×2 i.e. to create a table having 2 rows and two columns.



Welcome




 1 
 2 


 3 
 4

Output:

1	2
3	4

Note: When we create a table, by default it will have following characteristics:

no border
aligned left
occupy width and height which is required to accommodate the text.

If we want to set these values, we need to use three attributes of

tag.



Welcome

1	2
3	4

Output:

1	2
3	4

Merging of cells
- Many times it is required to merge columns or merge rows together. To achieve this we have to attributes : rowspan and colspan.
- Rowspan : this attribute is used to merge rows together into one row. If we want to merge three rows then we need to assign the value 3 to this attribute.
- Colspan : this attribute is used to merge columns together. If we want to merge two columns then we need to assign the value 2 to this attribute.

Examples:

Table – 1

Output:

1
2	3

Table – 2

Output:

1	2
3

Table – 3

Output:

1	2
3

Table – 4

Output:

1	2
	3

Creating table for storing records

Generally when we store any data in a table, each cell of first row describes the name of that particular column. That data is considered to be table header and the tag used for it is

tag.

Characteristics of

tag.

Text written inside

tag is by default aligned to center.

Text is displayed in bold letters.

Sample program:



 ID 
 NAME 
 CONTACT 
 EMAIL 


 1 
 Ankit Virparia 
 9925720005 
 ankit@ankit.co 


 2 
 Sonali Virparia 
 9925720005
 sonali@ankit.co

Output:

ID	NAME	CONTACT	EMAIL
1	Ankit Virparia	9925720005	ankit@ankit.co
2	Sonali Virparia	9925720005	sonali@ankit.co

The post HTML table tag appeared first on Ankit Virparia.

What is a tag?

Ankit Virparia — Tue, 14 May 2013 05:21:28 +0000

Before we start learning what is a tag? I prefer you just go through an article on: Basics of HTML

There are mainly two type of tags:

First type of tags are those in which nesting of other or same tag is possible. It can be written as
Data here
These tags are also called as paired tags whereby we have an opening tag written as and we have a closing tag written as
Second type of tags are those in which such nesting is not possible. It can be written as

These tags are also called as unpaired tags.

Generalized format/syntax to write a tag.

Data here

Eg. :

tag will create a horizontal line but as we cannot write anything inside a line, this tag is an unpaired tag and written as

Now what if want to display a line in red color? Do we have any other tag for it? Answer to it is NO, we can achieve this using the same

tag. For that we have arguments in

tag which are known as attributes. Each attribute will have value assigned to it.
Eg:

This will display the line in red color.
By default line generated by using

tag will occupy the 100% width of the browser. To change the width of line we have another attribute known as width.
Eg:

Ordering in nesting of tags

When tags are nested at that time the sequence of starting and ending tag must be in LSFC (last start first close) order.
Eg. Data
This is not the correct order. Rather the code must be written as follows:
Data

The post What is a tag? appeared first on Ankit Virparia.

Various categories of HTML tags

Ankit Virparia — Tue, 14 May 2013 05:13:04 +0000

Categories of html tags are decided based on their use and application areas. There are basically 4 categories of HTML tags. They are as follows :

Block contents / block elements
Text formatting tags
Form / user input tags
Frame / iFrame

Block contents:

As we now know that the tag generates the output in white area of your browser. The first category of tags i.e. block elements are used to allocate spaces in this white area. For eg. Space for displaying the logo, space for login, space for menu, space for footer and so on. There are 4 block content tags:

, :- these tags are used to hold the website structure.
, :- these tags are used to hold text or images.
Text formatting tags :
We are all familiar with MS Word document. Whatever effects we want to give to the text (i.e. bold, underline, italics etc.) similar effect can be given to the text in an html page using this category of tags. Tags in this category are : , , , ^{, _etc..}
Form/user input tags :
A dynamic website is a combination of two technologies : client-side and server-side technology. Whereby in order to transfer the data between the two we make use of this category of tags. Eg. : To login to a website we need to provide username and password which is to be submitted to the server. Tags belonging to this category are , , <button> etc.. <h3>Frame/iFrame : </h3> This category of tags can be used to merge (client side merging) multiple pages and create a single page. We have tags like <frameset> , <frame> and The post <a rel="nofollow" href="http://ankit.co/tutorials/html/various-categories-of-html-tags">Various categories of HTML tags</a> appeared first on <a rel="nofollow" href="http://ankit.co">Ankit Virparia</a>. </article> <article> <h1>Basic syntax to write HTML page</h1> Ankit Virparia — Mon, 13 May 2013 11:03:22 +0000 <ul> <li>In order to create a page using HTML the Basic syntax to write HTML is:</li> </ul> They are : <html> , <head> , <body> Out of these 3 tags, <html> tag is the outer most tag. The other two tags can also be called as blocks. <ul> <li>Difference between <head> and <body> tag.</li> <li><head> tag is that tag in html which is loaded first. It is loaded even before <body> tag gets loaded. Whatever we want to display before creating the view, must be written in <head> tag.</li> <li><body> tag is the tag where we can write the actual content to generate the output to be displayed on the white area of your browser.</li> </ul> Now let us consider that you want to open a website say <a href="http://www.ankit.co">www.ankit.co</a> <a class="highslide" onclick="return hs.expand(this)" href="../../images/title.png" rel="attachment"></a> As we can see here, before the site gets loaded we can see some text like “Ankit Virparia – A Programmer” being displayed on the title bar. This can be done by writing the title in the <head> section. Simple program to display a title of web page: <head> <head> <title> Welcome to the world of HTML</title> </head> </html> Output: <a class="highslide" onclick="return hs.expand(this)" href="../../images/title_tag.png" rel="attachment"></a> In the above code we have <title> tag inside the <head> section. There are some other things also which can be included in <head> section such as scripts, CSS and linking of other files. Example program : <head> <head> <title> Welcome to the world of HTML</title> </head> <body> Welcome to my website. </body> </html> Output: <a class="highslide" onclick="return hs.expand(this)" href="../../images/first_prog.png" rel="attachment"></a> The post <a rel="nofollow" href="http://ankit.co/tutorials/html/basic-syntax-to-write-html-page">Basic syntax to write HTML page</a> appeared first on <a rel="nofollow" href="http://ankit.co">Ankit Virparia</a>. </article> </main></body></html>

Ankit Virparia » Tutorials

Nested table structure.

Div based layout example

HTML div tag

Table based website structure

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

What is website wireframing?

Deciding width of a website:

HTML table tag

What is a table?

Characteristics of tabular data

HTML table tag

Examples:

Creating table for storing records

What is a tag?

There are mainly two type of tags:

Generalized format/syntax to write a tag.

Ordering in nesting of tags

Various categories of HTML tags

Block contents:

Text formatting tags :

Form/user input tags :