My HTML Way...: March 2011

Wednesday, March 16, 2011

Frames in HTML

Frame is a technique in which you can device you HTML browser into multiple sections (each section is called a frame) and display (load) separate web pages in each of them. So you can view multiple pages in a single browser.

To start with frames, one thing you must understand is there needs to be a container page that in itself does not load any webpage, but rather provides a template of frames.

Tags you will need:

<FRAMESET> </FRAMESET>

Attributes:

Cols:
This divides the browser into columns. That is split vertically. The value for this is the percentage division of the browser. For example "50%,50%" specifies that we need two columns each occupying 50% of the page.

Rows:
This divides the browser into rows. That is split horizontally. The value for this is the percentage division of the browser. For example "50%,50%" specifies that we need two rows each occupying 50% of the page.

Border:
Provides the thickness for frames borders.

Example:

<HTML>
 <FRAMESET rows="50%,50%" border="0">
 </FRAMESET>
</HTML>

But only this is not enough, as we have not told the browser which pages to load in the two frames that we just created. For this we need tag:

<FRAME> </FRAME>

Attributes:

Name:
The name of the frame. Very useful when we want a web page to target this particular frame. More on this is coming later.

Src:
The address of the page we will load.

MarginHeight:
The padding (margin) between the border of the frame and the page.

MarginWidth:
The padding (margin) between the border of the frame and the page.

Scrolling:
The scrolling effect for the frame.

Lets look at an example:

<HTML>
 <FRAMESET Rows="50%,50%" border="1">
  <FRAME Name="menu" Src="page1.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
  <FRAME Name="menu" Src="page2.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
 </FRAMESET>
</HTML>

WebPage:

As you can see the page is divided into two rows and the two frame tags occupy each of the frame in a sequential manner. So page 1 loads in frame 1 whereas page 2 loads in frame 2.

Lets divide the page into columns.

<HTML>
 <FRAMESET Cols="50%,50%" border="1">
  <FRAME Name="menu" Src="page1.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
  <FRAME Name="menu" Src="page2.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
 </FRAMESET>
</HTML>

WebPage:

Having both Rows and Columns in a browser:
Frames can be nested so that we can have a hybrid combination.

<HTML>
 <FRAMESET Cols="40%,*" border="1">
  <FRAME Name="menu" Src="page1.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
  <FRAMESET Rows="50,50" border="1">
   <FRAME Name="menu" Src="page2.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
   <FRAME Name="menu" Src="page3.html" MarginHeight="0" MarginWidth="0" Scrolling="auto">
  </FRAMESET>
 </FRAMESET>
</HTML>

WebPage:

Monday, March 7, 2011

Image Mapping

Image mapping is the technique where we break down an image into several hot-spots (image providing link to another page). You may have an image and you want to navigate to different pages by clicking different parts of it. Say for example, a Map. When you click on a country name you would like to visit that particular page. Image mapping allows you to link different parts of an image to different web pages. Lets see how its done.

We have this image divided in to showing 4 color quadrants and we want to link each quadrant to individual pages.

Lets create an image map for this picture.

The tag we need is:

<MAP> </MAP>

Attributes:

Name: The name of the map.

Along with <MAP> we also need the tag:

<AREA> </AREA>

Attributes:

Shape: The shape of the hot-spot we need. Ex: Rect, Plygon, Circle.
Coords: The coordinates for the shape, which depends on the shape.
Href: The address of the page we want the link to.
Alt: The tool tip for the link.

Lets see how the map looks like for our example.

<HTML>
 <BODY>
  <Image Src = "imageMapping.gif" UseMap = "#MyMap">
  <Map name = "MyMap">
  <Area Shape = "Rect" Coords = "0,0,100,100" href = "Red.html" Alt = "Red">
  <Area Shape = "Rect" Coords = "100,0,200,100" href = "Yellow.html" Alt = "Yellow">
  <Area Shape = "Rect" Coords = "0,100,100,200" href = "Green.html" Alt = "Green">
  <Area Shape = "Rect" Coords = "100,100,200,200" href = "Blue.html" Alt = "Blue">
  </Map>
 </BODY>
</HTML>

You can notice how the 'Coords' works. In this example, its Left, Top, Right and Bottom (Image is 200 X 200). If you remember in the Image Tag post we saw a "UseMap" attribute. This is the attribute we use to attach an image map to an image with a '#' preceding the name of the map.

So each of the color box is now connected to an individual web page.

Image Mapping with Circle:

This example shows image mapping with shape as circle. This is easy. Circle takes center and a radius. In this example 100,100 is the X,Y coordinate for the center (of the image) and 50 as the radius. I have highlighted the area for better understanding.

<HTML>
 <BODY>
  <Image Src = "imageMappingWithCircle.gif" UseMap = "#MyMap">
  <Map name = "MyMap">
  <area shape="circle" coords="100,100,50" href="Circle.html" alt="Circle" />
  </Map>
 </BODY>
</HTML>

WebPage: