Home arrow HTML arrow Page 7 - HTML Tutorial

HTML Tutorial

This article is the September contest winner. The author provides a basic tutorial of HTML, with code samples illustrating headings, lists, background colors, using the Frame tag and more.

Author Info:
By: Anand Narayanaswamy
Rating: 4 stars4 stars4 stars4 stars4 stars / 77
October 11, 2004
  1. · HTML Tutorial
  2. · Paragraph Tags, Attributes and Headings
  3. · Using Lists
  4. · Indents and Links
  5. · Working with Images
  6. · Working with Tables
  7. · Working with Frames
  8. · Using Forms, Text, Buttons, and Combo Box
  9. · Text Area, Check Box, and Radio Buttons
  10. · Additional Tags
  11. · Drawing Lines, SUB and SUP Tags
  12. · Test Yourself Questions

print this article

HTML Tutorial - Working with Frames
(Page 7 of 12 )

You can divide your browser window into two or more by applying frames. You can create any number of frames you require. They are created using <FRAMESET> tag. This tag helps you to specify the division, rows (ROWS Attribute) or columns (COLS Attribute) of the Window. In order to create frames, you should have a minimum of two html files. The paths to these files are specified using <FRAME> tag’s src attribute as shown in the listing given below:
Listing 16

    <FRAMESET rows = "10%,*">
    <FRAME src = "first.html">
    <FRAME src = "second.html">

The above creates a frame of rows. The first.html file occupies the first 10% and remaining space will be occupied by second.html file. Keep in mind that if you try to insert <BODY> tag, the frame will not appear on the screen.

Attributes used with Frameset Tag

  1. Cols: To divide the window into columns.
  2. Bordercolor: Changes the border color of the frame border.
  3. Frameborder: The values can be 0 or 1. The frame border will be invisible if you apply 0. This attribute is applied on majority of sites to make the appearance perfect.

Attributes used with Frame Tag

  1. noresize: By specifying this attribute, the frame border will not be resizable. Users can’t resize the window using their mouse.

  2. Scrolling: The values are Yes / No. If No, scrollbars will not appear. By default, scrollbars will appear. If the content is less, you can apply this attribute.

Advanced Usage of Frames

One of the advanced usages of frames is its Nesting. Here, two rows are created and the bottom frame is divided into two columns. Like this we can apply any number of frames, provided each such frame can accommodate relevant HTML files. However, I recommend you restrict the frame divisions so that the web page looks neat and is easier to navigate. Try out the code given below:

Listing 17

   <FRAMESET rows = "50%,*">
   <FRAME src = "first.html">
    <FRAMESET cols = "20%,*">
    <FRAME src = “second.html”>
    <FRAME src = "third.html">

In the above code, a row frame is created with equal portion and the second row is divided into two-column frame. Be sure to create these three html files before viewing the output. Otherwise, you will get error messages.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials