I need HTML code for a page with tabs.

Deep_Ocean

Hi,

Could anybody point me in the right direction in finding HTML code for a large box with tabs?

What I want to create is a box which includes information about a product. It will have a HTML affiliated banner inside the box and a number of tabs to discuss different aspects of the product.

For example the tabs may be "About" "Contact" "History" "Comments" etc. On the coments page I would like to include a discussion page allowing my users to share information. It will kind of be a website within a website.

I think the reason that I can't find the HTML code is that I am not using the correct terminology when searching google. I have searched "HTML code for boxes" "HTML code for tabs" "HTML codes for style sheets" "Html codes for frames".

I have zero knowledge of web design I simply copy and paste existing HTML codes onto a web creator website.

Any help would be appreciated.

Cheers

Mr_Forgetful

The best way nowadays is to use a javascript framework such as jquery. An example is here: http://jqueryui.com/demos/tabs/

It is relatively straight forward but it sounds scarier that it is. The html would be something like an unordered list.

<div id="example">
<ul>
<li><a href="ahah_1.html"><span>About</span></a></li>
<li><a href="ahah_2.html"><span>Contact</span></a></li>
<li><a href="ahah_3.html"><span>History</span></a></li>
</ul>
</div>

You then need to make it look right and then functional.

For the look add some css which you can style through jquery theme roller. It generates the css for you based on some colours and fonts styles. Then you include the css references and the javascript reference to the framework.

There are lots of information on the tabs page of jquery: http://docs.jquery.com/UI/Tabs with a demo and example code at the bottom of the page.

Deep_Ocean

Thank you for that. I will have a look. Thanks for taking the time to help.

Mr_Forgetful

If you get stuck give me a shout.

Deep_Ocean

I am stuck but I only had a brief look at it. I am off out now so will have a deeper look at it then. :beer:

swvillafan

For pre-written stuff try Dynamic Drive, have used them before and they're not too bad.

I know copying and pasting is easy enough but try when you are writing your site to have a look at the code in a little more depth and understand exactly what it does, this will help you if perhaps part of it breaks or if you want to customise it.

Mr_Forgetful

There is a good example page here with the jquery tabs. You can just save the source and play with that one. Download the javascript file too as the reference to that is local. Jquery looks complicated but it simplifies a lot for you. It is used in a lot of major websites now and allows you to do absolutely incredible things.

Demo: http://jqueryfordesigners.com/demo/tabs.html
Source: view-source:http://jqueryfordesigners.com/demo/tabs.html

Rocky01

It is better if you get some sort of training in web development and learn the programming languages like php or asp.net. Search in the internet and find online tutorials where they teach all web development skills.