We generally deal with pages which have content. To see the complete content we have to scroll down and up the page which seems fine to us but sometimes it becomes irritating when huge amount of data is present as we have to scroll a lot. We can take an example of a e-book. Suppose we have a e-book of 500 pages and need to go to a specific topic in that e-book which is somewhere in it.
Here we are using two combined elements to accomplish it -
Now here when we click on the 'Top' link then it will render control of cursor at the <div id="top"></div> element. But we need to make sure that href attribute of anchor link should be same as id attribute of the element along with the # sign.
Problems which we may face -
1) We will have to find out the topic in 500 pages
2) We might need to scroll a lot to go to that topic
Solution -
we can solve such kind of issue in the creation of pages which have huge amount of data by using some html tags for example using anchor tag -
Here we are using two combined elements to accomplish it -
<div id="top"></div>
<a href="#top">Top</a>
Now here when we click on the 'Top' link then it will render control of cursor at the <div id="top"></div> element. But we need to make sure that href attribute of anchor link should be same as id attribute of the element along with the # sign.
<html> <body> <div id="top"> <h2>Top</h2> <ul> <li><a href="#introduction">Introduction</a></li> <li><a href="#startingContent">Starting Content</a></li> <li><a href="#mainContent">Main Content</a></li> <li><a href="#bottom">Bottom</a></li> </ul> </div> <div id="introduction"> <h2>Introduction</h2> <a href="#top">Top</a> <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> </div> <div id="startingContent"> <h2>Starting Content</h2> <a href="#top">Top</a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec malesuada dolor. Aenean aliquet egestas orci, vitae hendrerit ex luctus eu. Proin consectetur in justo quis euismod. Vestibulum eget erat augue. Fusce mollis turpis dolor, ac tempor lorem maximus eget. Integer ante ex, convallis sed velit in, tristique tempus lectus. In sed eros mollis, ultricies libero nec, euismod lorem. Aliquam egestas risus augue, at elementum dui fringilla et. Phasellus consequat vestibulum rutrum. Maecenas sed turpis varius, porttitor erat nec, lobortis erat. Vestibulum ut condimentum felis. Donec eu nunc sagittis, fermentum augue et, cursus erat. Curabitur vulputate orci et orci dignissim varius. Nam non viverra quam. Mauris in nisl sed metus vestibulum tristique sit amet nec leo. Mauris efficitur turpis orci, et facilisis diam auctor aliquet. Proin ex purus, tempor ut nibh nec, ornare vulputate felis. Sed eu molestie eros, porta lobortis nulla. In euismod quis purus sit amet imperdiet. Duis sagittis lacinia mollis. Aliquam pretium leo ac placerat eleifend. Sed facilisis id turpis in varius. Nam eu nunc ut enim commodo sollicitudin ut tempor metus. Vestibulum egestas arcu eu enim finibus finibus. Ut id mi ante. Nulla molestie fringilla nisi eget finibus. Ut quis porta magna. Mauris ac urna augue. Sed gravida purus ut bibendum facilisis. Nullam vulputate ligula neque, id semper dui blandit non. Quisque sed laoreet mauris, sit amet sagittis nisi. Nunc id euismod sem, quis ultrices ex. Maecenas feugiat finibus enim, ut euismod velit rutrum sed. Nullam commodo, nibh sed dictum vehicula, est nibh condimentum mauris, quis aliquet massa odio sed ipsum. Integer consequat, enim a imperdiet venenatis, neque leo posuere ipsum, quis semper diam felis vitae odio. Phasellus in elit id enim convallis pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque vel pharetra augue, tincidunt pulvinar leo. Maecenas nec lorem vitae neque placerat auctor ac in erat. In porta turpis eget ultrices rhoncus. Fusce vel diam sit amet turpis facilisis rhoncus. Ut id feugiat tellus, quis maximus ex. Duis id efficitur velit, ornare fermentum quam. Vestibulum tincidunt non leo vel malesuada. Morbi vel ipsum eleifend, accumsan tellus ut, interdum neque. Cras ligula ipsum, viverra iaculis gravida sed, posuere sed justo. Proin a finibus nisl. Etiam vitae nulla molestie, aliquet turpis a, condimentum dolor. Duis ac lacinia ex, eget cursus justo. Donec lorem nibh, luctus in diam et, vehicula ultrices mauris. Maecenas accumsan feugiat consequat. Quisque eget laoreet velit. Nullam malesuada enim sapien, quis facilisis libero sollicitudin quis. Nulla sit amet aliquam nisi, non pellentesque libero. Cras nibh tortor, euismod nec hendrerit sit amet, suscipit et urna. Cras risus libero, egestas sed fringilla ac, semper condimentum eros. Mauris eget vehicula libero. Donec est massa, commodo non orci a, condimentum condimentum sapien. Aliquam erat volutpat. Aliquam sit amet urna quis justo euismod tincidunt. Vestibulum id congue dolor, eu consectetur risus. Morbi mattis viverra mauris, et dictum nulla venenatis sed. Nullam tristique nisi mauris, malesuada semper lacus tincidunt eget. Vestibulum laoreet at odio non blandit. Aliquam a nisi at tellus vestibulum aliquet. Proin nibh quam, volutpat vel nulla at, ultricies mollis tellus. Pellentesque tempus egestas nunc, sit amet gravida nisi. Praesent lorem odio, consectetur a metus ut, ornare pharetra sapien. Aliquam erat volutpat. Donec non rhoncus purus. Curabitur commodo ac erat ac congue. Nullam metus erat, blandit quis fermentum ac, pharetra eu elit. Vivamus bibendum purus in arcu pharetra, ac maximus sapien tempor. Cras commodo in sapien vitae vulputate. Maecenas ac purus quis velit vulputate semper non feugiat elit. Vivamus et iaculis velit, efficitur ornare nulla. Integer commodo faucibus turpis, congue egestas leo elementum sit amet. Praesent vehicula nunc arcu, eget congue risus bibendum quis. Nulla facilisis, diam in pretium pulvinar, est lorem egestas justo, ac dapibus elit nisl ut arcu. In interdum sapien eu ultricies hendrerit. Curabitur id est lectus. Fusce sed libero et metus pharetra posuere. Duis laoreet accumsan posuere. Morbi nunc lorem, sodales ut nibh non, semper molestie velit. Phasellus pellentesque diam at porttitor euismod. Quisque elementum, sapien non varius scelerisque, dui ligula commodo mi, a sagittis lacus neque in lorem. Aliquam fringilla pulvinar turpis ut dictum. Aliquam ullamcorper auctor sollicitudin. Donec egestas tempor nibh ullamcorper malesuada. Sed posuere nunc orci, vitae scelerisque dolor venenatis nec. </p> </div> <div id="mainContent"> <h2>Main Content</h2> <a href="#top">Top</a> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Fusce eu quam in ligula mattis mollis. Aliquam bibendum quis odio ac consequat. Vestibulum imperdiet porttitor erat, quis consequat purus sollicitudin id. Aenean dictum lacus lectus, vitae bibendum est pretium in. Duis finibus pretium odio sollicitudin vestibulum. Nunc non tincidunt nulla, sit amet pulvinar tellus. Pellentesque sollicitudin eleifend bibendum. Vestibulum laoreet, augue sit amet gravida consectetur, justo velit elementum lorem, a vehicula justo lectus vitae lorem. Sed lacinia mattis dui, quis rutrum lorem egestas sit amet. Quisque lacus magna, consectetur sed odio ut, molestie porttitor mauris. Sed commodo laoreet metus quis blandit. Fusce id metus at lorem fringilla gravida. In faucibus sapien a ex vestibulum molestie. Vestibulum vitae maximus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae ornare diam, sed blandit turpis. Phasellus a nibh a orci feugiat interdum sed vel ex. Fusce interdum libero nec dolor eleifend, sit amet tristique libero malesuada. Suspendisse purus orci, fringilla eu laoreet lobortis, semper at ex. Ut non euismod neque. Morbi ultrices leo a accumsan congue. Phasellus non turpis at est dictum vestibulum a quis tellus. Ut at viverra sapien. Duis varius ex nec leo tempor, sed posuere purus malesuada. Maecenas suscipit ex eu mi lacinia, a vehicula diam laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam porta libero tortor, condimentum dapibus sapien mattis eu. Vestibulum sed mauris pellentesque, fringilla augue condimentum, dictum sem. Sed fermentum aliquet consequat. Suspendisse magna nunc, porttitor vitae bibendum non, fermentum sit amet risus. Curabitur ultrices vitae nisi ut mollis. Ut non turpis nec elit iaculis accumsan in vel libero. Duis sed porta metus, sed iaculis ante. Cras in imperdiet magna. In eu odio ut dui placerat facilisis et id sem. Donec commodo ac urna sed egestas. Vivamus sed bibendum velit. Praesent condimentum risus massa, sit amet condimentum magna pellentesque eget. Ut ex nisi, malesuada eu lectus quis, porta tristique velit. Suspendisse consequat feugiat eros eu ullamcorper. Phasellus sodales erat in volutpat convallis. Sed at euismod nisi. Fusce non nisl sed est dapibus dignissim sagittis scelerisque orci. Fusce ac turpis placerat libero commodo elementum a in leo. Etiam nec efficitur elit, ac dignissim lectus. Quisque ac sem nec lorem tempus fermentum quis quis nibh. Mauris scelerisque, diam id cursus aliquet, ligula eros euismod ipsum, in ultricies sem mauris a mauris. Ut sit amet porta arcu, sed egestas eros. Nunc et dictum odio. Praesent vitae lectus non erat suscipit rhoncus id in magna. Donec ac efficitur tortor, sit amet congue nunc. Proin ac viverra metus. Quisque consequat, ligula at placerat aliquam, lacus purus vestibulum nisl, in rhoncus nisl turpis sed tellus. Nunc sed justo in ligula interdum condimentum bibendum et magna. Duis congue vitae lectus sit amet dictum. Phasellus hendrerit est lobortis quam semper, eu tristique dolor hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce quis diam ex. Nullam vitae finibus augue. Donec vehicula cursus nisi sit amet viverra. Maecenas rutrum felis sed sapien tristique accumsan. Maecenas venenatis sed felis nec fermentum. Integer accumsan orci porttitor, mattis enim nec, sodales urna. Integer consectetur quis mauris eget molestie. Donec sit amet eros eu leo euismod elementum ut id sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam faucibus massa et facilisis volutpat. Donec at elit eget metus consequat fermentum. Morbi auctor vitae elit ullamcorper euismod. Mauris ullamcorper et tellus eu porttitor. Vivamus ut aliquam massa, feugiat volutpat est. Aliquam sed tellus vel enim tempor auctor. Duis interdum felis et est malesuada, nec tempus ligula volutpat. In tincidunt dolor a finibus dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ullamcorper diam vel lacus pellentesque elementum. In consequat mauris vitae massa faucibus sollicitudin. Cras elementum tortor sed enim pharetra gravida. Pellentesque quis massa elementum urna varius rhoncus. Nulla augue ipsum, consectetur sed feugiat eget, aliquam et diam. Nunc a scelerisque quam. Donec eu sem sem. Pellentesque tincidunt quis odio sed volutpat. Quisque lobortis molestie orci sed auctor. Nam ligula ligula, sodales vel dui ut, porttitor laoreet mauris. Curabitur id magna vestibulum, blandit purus sit amet, varius dolor. Vestibulum suscipit fermentum auctor. Donec aliquam dolor et eros elementum facilisis. Donec vehicula sit amet odio ut molestie. Integer ultricies, tellus vel posuere tristique, libero ante accumsan mauris, eu consequat velit mauris vitae risus. Fusce sapien elit, viverra ut nunc eget, scelerisque congue justo. Nulla vestibulum mattis tortor. Suspendisse id suscipit orci, in tincidunt lorem. Vestibulum tortor sapien, eleifend commodo auctor id, efficitur eget erat. </p> </div> <a href="#top">Go to the top</a> <div id="bottom"> I am at bottom </div> </body> </html>
No comments:
Post a Comment