HTML - Load Web Page At A Specific Location

is there a way to link to a location on a page like in the example below but instead of the link existing on the same page as the target location, the link exist on one page and points to a bookmark on another page?

So for example, I want index.html to have a link that takes the user to chapter 4 of content.html (which is half way down the page)

Code:

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

Trying to see if someone has a work around for this. I have a vbulletin forum with a shoutbox and I would like to move the shoutbox to a page outside of the forum. I did this before with an iframe when I had phpbb3 but have not been able to do this with vbulletin.

I now have the shoutbox on an external page but it still contains the header and footer and I have not found a way to remove these. I just need the actual shoutbox approx 730px by 350px. Is there a way to pull only the specific area of a page to another page?

*****Edit Resolved *********

I need to know how to define in html a 'class' for lack of a better term so i can make the hyperlink go to page.html#specificpoint

I know how to do the hyperlink, just not define where it would load to...

hello people!
so, i need some help with placing a table in a specific location in my website. please check it out here, www.tech-nuke.com. you will notice that there are a white blank space in the left side of the page, which i want to place a table there.

and just for clarification, i want to place a table tag so the white empty area become independent (not really!) from its neighbor.

i have been trying so hard to get something in that specific area but every time i missed up the desigen of the page. here is the html code of that part of the page:

PHP Code:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="titlebg">مرحبا بكم في <?php bloginfo('name'); ?></td>
</tr>

<tr>
<td valign="top"><table width="100%" border="0" cellpadding="5" cellspacing="0">

<!--Added: Latest forum topics -->
<tr>
<td valign="top" class="cell-t" style="border:1px solid #ccc;">اخر مواضيع المنتدى</td>
</tr>
<td class="cell-h">

<? include('recent-topics.php'); ?>

</td>

<!-- Added: Remove for box 4 -->
<tr>
<td valign="top" class="cell-t" style="border:1px solid #ccc;">احدث موضوع</td>
</tr>
<tr>

<td class="cell-h">
<?php $recent = new WP_Query("cat=25&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<div class="cat-image"><a href="<?php the_permalink() ?>"><img style="padding:0px; margin:0px; border:0px;" height="150" width="150" src="<?php echo get_post_meta($post->ID, "Thumbnail", true); ?>" /></a></div><?php the_content_limit(800, ""); ?>
<div style="display:block; text-align:right;"><b><a style="font-size:14px;" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> &raquo;</a></b></div>
<?php endwhile; ?>
</td>
</tr>
<!--end added: remove for box 4 -->


<tr>
<td width="65%" valign="top"><table width="100%" border="0" cellpadding="5" cellspacing="0">

<tr>

<script type="text/javascript"><!--
google_ad_client = "pub-6723104396625340";
/* 468x60, created 4/26/09 */
google_ad_slot = "7601118167";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<td valign="top">


<table width="100%" border="0" cellpadding="5" cellspacing="0">
<!--
<p>1</p>
-->


<!-- Added: Remove to get box 1-->
<tr>
<td valign="top" class="cell-t" style="border:1px solid #ccc;">++C</td>
</tr>


<tr>
<td class="cell-h" style="padding:8px;">
<?php $recent = new WP_Query("cat=17&showposts=2"); while($recent->have_posts()) : $recent->the_post();?>
<div align="center" class="Small-Landscape-image"><a href="<?php the_permalink() ?>"><img style="padding:0px; margin:0px; border:0px;" height="80" width="80" src="<?php echo get_post_meta($post->ID, "Thumbnail", true); ?>" /></a></div>
<?php the_content_limit(700, ""); ?>
<div style="display:block; text-align:center;"><b><a style="font-size:14px;" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title2('', '...', true, '70') ?> &raquo;</a></b></div>
<?php endwhile; ?>
</td>
</tr>
<!--End Added: Remove to get box 1 -->
</table>
</td>
<td style="border-left:1px dotted #999999;" valign="top"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<!--
<p>2</p>
-->

<!-- Added: Remove to get box 2-->
<tr>
<td valign="top" class="cell-t" style="border:1px solid #ccc;">برمجة الالعاب C++/SFML</td>
</tr>
<tr>
<td class="cell-h"  style="padding:8px;">
<?php $recent = new WP_Query("cat=25&showposts=2"); while($recent->have_posts()) : $recent->the_post();?>
<div align="center" class="Small-Landscape-image"><a href="<?php the_permalink() ?>"><img style="padding:0px; margin:0px; border:0px;" height="80" width="80" src="<?php echo get_post_meta($post->ID, "Thumbnail", true); ?>" /></a></div>
<?php the_content_limit(700, ""); ?>
<div style="display:block; text-align:center;"><b><a style="font-size:14px;" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title2('', '...', true, '70') ?> &raquo;</a></b></div>
<?php endwhile; ?>
</td>
</tr>

im going to use this webpage as an example http://danalverez.webs.com/index.htm

im creating a webpage in dreamweaver and im having a problem
i uploaded a background image and centered it and thats fine. But now im trying to creat links over the background image and i can, but when i view the webpage in IE the links or text move everytime i maxamize or minamize the webpage. when you maxamize or minamize the webpage above, the home button link is always in the same location on the page. When i max/min my website the home button jumps to the left or right. when its minamized its in the correct location, but when i maxamise the page the button is to much left.