Creating Section links in WebKidss

Size: px

Start display at page:

Download "Creating Section links in WebKidss"

Gerald Gray
5 years ago
Views:

Whether you modify an existing one or you are starting from

1 Creating Section links in WebKidss First thing we need to do is to either create a form or access an existing one. Whether you modify an existing one or you are starting from scratch you will enter your html information just as you would for any other form.

2 As you can see in the example we have begun to add general content to our form. In order to create these sublinks to other sections of the page we must create what is known as an anchor for each of the sections we want to identify. This usually begins with a top of the page identifier. To create the anchor you will insert the following code into your html at the point you want to create the anchor. <a id=ptop class="locallink"></a> The id will identify the name of the anchor. So in the above example we have identified this anchor as ptop. The class will identify that it is a link within the same page. And as with and html we must close the anchor with a </a>. This code snippet identifies an invisible anchor within the html for the page.

3 You can see in the example to the right where we have put an anchor in identifying the Second section of the page. <a id=psecond class="locallink"></a> We create the same type of html snippet for the additional sections of this form. *In this example we created a third anchor and a bottom anchor (which takes us to the bottom of the page).

4 Once we have created all of our anchors for the page we must decide how best to give access to the anchors quickly to the user. This is generally done with a series of links in several places throughout the page.

5 As you can see we have created links to the Top, Second, Third, and Bottom sections of this page. To accomplish this we inserted the snippet of code shown below: <table border=0 width="100%"> <tr> <td>top Section</td> 2. </td> </tr></table> 1. What this does is to give us a table with a single row with two columns. In the first column is the title of our section (#1). In the second column (#2), we created a series of hyperlinks with each on pointing to one of the anchors. To do this use the following code snippet for each link: We use the class locallink again but this time we put in a href= and tell it which anchor to point to. In this instance we use the # sign and the name of the anchor. The # sign tells our web browser that it is an anchor we are linking to versus another web address.

This is what our form looks like to the actual user. You can see we have copied the link table and put it at the top of each of the sections and relabeled is with the title of each section.

6 This is what our form looks like to the actual user. You can see we have copied the link table and put it at the top of each of the sections and relabeled is with the title of each section. Clicking on one of the links will move the page by putting the associated anchor point on the top of the window So if we click on the Second link it will move us down the page by putting the Second Section at the top of the page.

7 The Form Code in Entirety <center><h3>webkidss Anchor Demo</h3></center> Content of our form...this is what we would consider the "top" of the form...you can choose any title for the anchors. So if we started with say Student History...we can title the first anchor point "Student History." To do that we insert a bit of html code to identify the anchor: You will need to replace the parentheses below with carats. (a id=ptop class="locallink")(/a) The id= is where we identify the anchor name. The class= is where we identify that it is a link to another part of this page versus another website. Once we have identified the anchors we need to include a link that takes the user to the anchor. A lot of the time you will see "back to top" on websites and clicking the link will take you back to the top of the webpage. This is how it's accomplished. <a id=ptop class="locallink"></a> - Here we have put an anchor in and identified it as "ptop" <table border=0 width="100%"><tr><td>top Section</td> </td></tr></table> We now put in another anchor that identifies the "second" section of the page. <a id=psecond class="locallink"></a> <table border=0 width="100%"> <tr><td>second Section</td> </td></tr></table> And again for another anchor for the third section. <a id=pthird class="locallink"></a> <table border=0 width="100%"> <tr> <td>third Section</td> </td> </tr></table> And finally a bottom section (or possibly the bottom of the page depending on your needs.

8 <a id=pbottom class="locallink"></a> Bottom Section... <table border=0 width="100%"> <tr><td>bottom Section</td> </td> </tr></table>

THE ASIAN SCHOOL. Class-10. ch8. A. Check the Right Answer (1*9)

THE ASIAN SCHOOL. Class-10. ch8. A. Check the Right Answer (1*9) THE ASIAN SCHOOL Class-10 ch8 A. Check the Right Answer (1*9) 1. Which attribute of the tag is used to create named anchors in a web document? c. NAME 2. Which attribute of the tag is used to add