Saturday, 4 June 2016

Navigating to particular section in HTML

In webpage, various topics are included and to navigate to particular topics or section, we used to scroll up & down throughout the page. This trouble can be solved by declaring an "id" attribute to each section using "div" tag.

Consider the following example:-

section.html:-

<html>
<head>
<title>Section Portion </title></head>
<body>
<center><b>Trees</b></center> <br/>
<center>
<a href="#definition">Definition</a> &nbsp;&nbsp;&nbsp;
<a href="#overview">Overview</a>
</center> <br/> <br/>

<center> <img src="trees.jpg" alt="trees" width="900" height="600"> </center> <br/>

<a name="definition">
  <div id="definition">
     <p>
<b>Definition</b> <br/>
Although "tree" is a term of common parlance, there is no universally recognised precise definition of what a tree is, either botanically or in common language.In its broadest sense, a tree is any plant with the general form of an elongated stem, or trunk, which supports the photosynthetic leaves or branches at some distance above the ground. Trees are also typically defined by height, with smaller plants from 0.5 to 10 m (1.6 to 32.8 ft) being called shrubs, so the minimum height of a tree is only loosely defined. Large herbaceous plants such as papaya and bananas are trees in this broad sense.
A commonly applied narrower definition is that a tree has a woody trunk formed by secondary growth, meaning that the trunk thickens each year by growing outwards, in addition to the primary upwards growth from the growing tip. Under such a definition, herbaceous plants such as palms, bananas and papayas are not considered trees regardless of their height, growth form or stem girth. Certain monocots may be considered trees under a slightly looser definition; while the Joshua tree, bamboos and palms do not have secondary growth and never produce true wood with growth rings, they may produce "pseudo-wood" by lignifying cells formed by primary growth.
Aside from structural definitions, trees are commonly defined by use, for instance as those plants which yield lumber.
<img src="Tree_def.jpg" alt="definition" width="900" height="700">
</p>
  </div>
</a>

<a name="overview">
  <div id="overview">
     <p>
<b>Overview</b> <br/>
The tree growth habit is an evolutionary adaptation found in different groups of plants: by growing taller, trees are able to compete better for sunlight. Trees tend to be long-lived, some reaching several thousand years old, as well as tall. Trees have modified structures such as thicker stems composed of specialized cells that add structural strength and durability, allowing them to grow taller than non-woody plants and to spread out their foliage. They differ from shrubs, which are also woody plants, by usually growing larger and having a single main stem; but the distinction between a small tree and a large shrub is not always clear, made more confusing by the fact that trees may be reduced in size under harsher environmental conditions such as on mountains and subarctic areas.
</p>
  </div>
</a>

</body> </html>


Output:-





Explanation :-

When we will click on the "definition" link, it will redirect to the definition portion of the page. Similarly, when we will click on the "overview" link, it will be redirected to the overview section of the page.

No comments:

Post a Comment