CodeHelp - glossary F

This text is positioned using the float property to attach the element, in this case the class sidebar, to the right border. The vertical position is relative to the flow of the document and the text will take up the whole screen if the class property, width, is not set. If you use <br>, note that the longest line dictates the starting position of ALL other lines.

Float allows an element to be positioned against the left or right border with text flowing around it. The previous paragraph is set as float:right to test whether your browser supports the float property.

The sidebar class is set to justify the coloured text within a width of 30% of the available text area of the browser. Float is not supported in Netscape3 and the sidebar text is printed in the normal position. Bear this in mind before you use the float property for margin notes or similar. The float and the paragraph are aligned quite independently, retaining the same line as the paragraphs above and below.
Top

If you want to specify more than one font control in a single class or rule, use the shorthand font property and separate each value with a space. Weight values precede style, variant, size line height and font names in that order.
P {font: bolder italic 10pt Arial, sans-serif }
Top

Now deprecated, the font tag has been overtaken by CSS. You may choose to use it for pages viewed in v3 browsers. The main advantage in CSS is the reuse of code: under HTML3 if you wanted a table showing ordinary text in the first column and highlighted text in the second column, e.g. a product description in column 1 and the low, low, price in column 2, you would have to specify all the font changes on every line. If you wanted customized text in column 1 as well to differentiate the descriptions from the rest of the text on the page, that would be two font changes per line. With 30 products that gets to a mess of 60 <font color="#FFC354" size="+1"> and </font> tags. Now with HTML4 and CSS, you can set the parameters for each column as a class and even set the table definition itself so that the final code only requires class=one or class=two to be set.
Top

You will have no way of knowing which fonts a visitor has installed on their machine, even Arial cannot be relied upon - it's Helvetica on the Mac and some PC users do remove Arial for some strange reason - so always specify one of the font families in your CSS. (Not all families are represented in v4 browsers.)

• serif e.g. Times
• sans-serif e.g. Helvetica, Arial
• monospaced e.g. Courier
• cursive e.g. Zapf-Chancery
• fantasy e.g. Impact

For best results, stick to serif, or sans-serif with monospaced for code and fantasy for special effects (in some browsers only). If you want to specify a font, make sure that you add a font-family as the last value in the font or font-family property or the text might not display. (And you'd never know because the font you prefer is installed on your system!) Font names which contain spaces MUST be enclosed within " or ´ marks.
Top

Like position and size values elsewhere within CSS, font-size can be specified as absolute or relative. Exactly how large or small is dependent on the other CSS settings in the document or browser settings.

Length Sizes

Size can be specified directly in any CSS length unit although pt (point) is the most common for font-sizes

Percentage sizes

Taking the inherited size as 100%.
Top

Select normal, italic or oblique. The style must be supported by the actual font in use - italic is usually a separate font design. Note that bold is not part of font style even though it often requires a separate font design. Bold is part of font-weight.
Top

Little used property which can be used to display text in small caps if a true small caps font is installed on the user's system. Some browsers may simulate small caps but results could be unexpected.
Top

A true replacement for the <b> tag. Font-weight allows the following values:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Normal is the inherited default font weight and is equivalent to 400. HTML3 <b> corresponds to 700. Although useful, this property can cause problems both because some fonts do not support nine levels of boldness and because browsers are inconsistent. In particular, the inherited font would need to be a bold font to support the lighter values. Experiment with this page in a v4 browser to see the effects.
Top

Forms are almost as large a topic as CSS itself. All browsers and all versions support forms but each browser and each platform can change the actual size and look of both the form and each element within it, so tailoring a form to match a web page is not always possible. Also, remember NEVER to nest or overlap forms. Each <form> tag MUST have a </form> tag before a new <form> tag is opened. The glossary only has space for a brief summary of the various input tags. Forms need to have a matching script to process the output of the form. PHP forms can include the form and the processing script in the same PHP file. Perl can also be used to process forms - some webhosts provide pre-written Perl/CGI scripts or you can write your own Perl script to output and/or process forms.

• Properties
  The URL for form submission (read-only in IE3):
  document.formname.action;
  Sequential access to each input element in the form.
  document.formname.elements[];
  Number of input elements in the form.
  document.formname.elements.length; or document.formname.length;
  The submission method of the form (GET or POST):
  document.formname.method;
  Target window for form results (read-only in IE3):
  document.formname.target;
• Methods
  Reset the form:
  document.formname.reset();
  Submit the form:
  document.formname.submit();
• Event Handlers
  To extend the function of the Reset button:
  onReset();
  To add Javascript validation of data submitted in the form, use:
  onSubmit();
  to test for acceptable values before using document.formname.submit(); to finish the job.

Top

Frames allow more than one HTML document to be displayed in the same window. Done properly, frames can be very useful. The bad reputation of framed sites comes from bad design which can trap the visitor within your frameset long after they have moved on to another site. The following useful piece of Javascript can be added to the <head> section of your main index page:

If someone links to your site from within a framed page, your index page will check that the current page (self) is the same as the top page. If the frame is still active, the top page will be the frameset page, so the script sets the top page to your page, removing the frames. Note: If you have your own domain name but use web forwarding to point to different web space, this forwarding may use frames. The above script would take the browser out of the web forwarding arrangement.

The frame tag itself must be contained within a frameset tag, which itself must be in a document of it's own with no body tag. The main attributes of the frame tag are name, src, frameborder, scrolling and the optional noresize. The frame name is vital for targeting links within the frameset - the main problem with framed sites - the src attribute contains the URL of the content file (a normal HTML file with a <body> tag), noresize locks the frame to the size specified in the frameset tag, scrolling can be omitted, set to yes, no or auto (same as omitting the attribute).
Top

Setting frameborder within the <frame> tag can be unreliable. Set the border in the frameset tag only.
Top

All framed sites require a frameset document. CodeHelp no longer uses frames. The following is taken from a previous page and may help to understand the frameset idea (as well as gain some idea of the possible complexity of a framed site).

Note the line <base target="_top">. Using the reserved value _top means that all links from this page will replace the frameset and load as the top window. The content pages use different targets, according to their function. A navigation frame would target the content frame - specify the name exactly as typed in the frameset definition - in the <base target=""> tag. Also note that the first frame (used as the navigation bar) is set as non-scrolling (any content outside the size set in the frameset will be lost). When you use border=0 in the frameset tag, it's important to specify each frame as noresize or the browser may add a border anyway to allow the user to resize the frame window. Also remember to set all frames that do not meet the right hand margin non-scrolling using scrolling="no". Allowing scrolling on inside frames will render your border setting useless as a scroll bar will show in place of the vertical border.
Top

Little used attribute of the frameset tag - only recognized by IE3 and later - which adds extra space between adjacent frames. Takes a value in pixels.
Top