CodeHelp - glossary I

<i>italic</i>

Interchangeable to the <em> emphasis tag. Using <i> or <em> does not guarantee that the enclosed text will be in italic, visitors can customise many browsers to use alternative methods of rendering tags like <i>, <em>, <b> and <strong>. To be certain of how a tag will render text you must use CSS.
Top

Issue one
Netscape4 does not support the id attribute
fully because it does not allow the id to be
used as an anchor reference, insisting on
<a name=""></a> syntax.
Issue two
HTML4 has a bug in that forms
need a name tag instead of an id in order for
Javascript to work with the form. You need to
change the doctype of these pages to
make the HTML valid as HTML4.

Under HTML4, all elements can be given a unique id - an alphanumerical reference to that element that is not shared with any other element in the document but which can be reused in other documents. (I would suggest that for the purposes of CSS you refrain from giving different elements in separate pages the same ID.)
If you have pages that are often viewed using older browsers you would need to be using browser identification. If not, you can use the id as an anchor reference. Just add an id to any tag - like the <p> or <h2> types - to make it into an anchor and use with a link
<a href="#id">LINK_TEXT</a>.

Top

To assign settings in your stylesheet to an element using the id, use the id selector # in the stylesheet:
#mailgif {border-style:none;}

• . the class selector
• , the Group selector

Remember: id names must be unique to that document. If you want to reuse the style information with a different element in the same page, use a class.
Top

Iframe is part of HTML4 but is only supported by IE3, 4 or 5. There are ways to simulate an iframe in Netscape4 (and other frame capable browsers). For more information on iframe and how to simulate an iframe, see Web Design in a Nutshell by Niederst
Top

Image inherits properties and event handlers from HTMLElement. Only additional or over-ridden features are mentioned here. No methods are defined.

<img src="../images/spot.png" border="0" alt="test image" width="30" height="10">

• Constructors
  Create a new Image object for an image 30 pixels by 10:
  var myimage = new Image(30,`0);
  
• Properties
  Read or change the border width of the image:
  myimage.border
  Check whether an image load is complete:
  myimage.complete
  Height or width of the image (including the width of the border):
  myimage.height
myimage.width
  Horizontal or vertical padding of the image:
  myimage.hspace
myimage.vspace
  Full resolution or low resolution source for the image:
  myimage.src="../images/spot.png";
myimage.src
myimage.lowsrc
  
• Event Handlers
  To handle a user aborting the loading of the image use:
  <img src="../images/spot.png" onabort="myhandler();">
or
  myimage.onabort=myhandler();
  To handle an error loading of the image use:
  <img src="../images/spot.png" onerror="myhandler2();">
or
  myimage.onerror=myhandler2();
  When the loading of the image is complete, onload() functions will be called:
  <img src="../images/spot.png" onload="myhandler3();">
or
  myimage.onload=myhandler3();

Top

• alt
• border
• gif files
• graphics
• jpeg
• margin
• src

The <img> tag must include a src attribute (the location of the image) and the alternate text. Specifying the height and width in pixels can save time when the page is viewed, especially if tables are used, but border, and align are deprecated in HTML4 - use stylesheets.
Top

CodeHelp.co.uk uses only two stylesheets for the whole site, one to control the positioning and transparency of the navigation bar and one to control all the other content. Despite Netscape v4 not fully supporting CSS, the site uses the same stylesheets for both v4 browsers. Single stylesheets can be imported using
<link rel="stylesheet" href="URL" type="text/css">
but if you need to split your stylesheet files into more sections and then need to import more than one stylesheet into any one document, use @import.
<style type="text/css">
@import url(http://mypath/cssfile.css);
</style>
Note: the URL must be absolute and is NOT enclosed in " marks. Also, the stylesheet file must have a .css extension.
Top

1. Paragraphs:
   The CodeHelp site uses CSS to create paragraphs much more akin to a word processor document than a HTML web page. The text-indent CSS property allows the designer to set the paragraph indent for all chosen paragraphs using a class selector: <p class=indent></p>. Without CSS, this can only be achieved with workarounds and with little certainty. Now the indent can be set as a unit of length or a percentage of the line length. CodeHelp uses text-indent:2em;
   
2. Lists:

OL {list-style-position: outside;}
OL {list-style-position: inside;}

The <ol> and <ul> tags do not specify the indent to be used by the browser but the stylesheet allows the designer to ensure that lists use consistent and predictable formats. The value inside vertically aligns the start of each subsequent line with the list marker. The value outside vertically aligns with the first word of the list item itself, isolating the list marker, making it more noticeable and forming a hanging indent.
Top

<form method=post action="/cgi-bin/dummy.pl">

Top

• Syntax
  To access an input element within an HTML form use:
  form.elements[0];
form.inputname;
• Properties
  Whether a checkbox or radio button is checked :
  var checked = document.formname.elementname.checked;
  Read the default status of a checkbox or radio button:
  var checked = document.formname.boxname.defaultChecked;
  Read or change the default text displayed in an element:
  var inputtext = document.formname.element.defaultValue;
  The form containing the element:
  var myform = document.forms[0].elements[0].form.name;
  The name of an element within the form:
  var myname = document.demo.elements[1].name;
  The type of an input element:
  var mytype = document.demo.elements[2].type;
  The value displayed or submitted by an input element, including elements like select boxes and radio buttons where the value may not be obvious from the browser.
  var myvalue = document.demo.inputselect.value;
  
• Methods
  Give or remove keyboard focus from an element:
  document.demo.text1.focus();
document.demo.text1.blur();
  Simulate a left mouse button click on a form element:
  document.demo.check3.click();
  (Now go back here to see the effect on the third checkbox. Note how repeated clicks toggle the state of the checkbox.)
  
  Select all the text in an input element:
  document.demo.area1.select();
• Event Handlers
  Some of the most useful event handlers belong to Input.
  The first chance to verify data entered into the form is when the element itself loses keyboard focus:
  <input type="text" name="ID" onblur="my_checkfunc();">
  Not all blur() events mean that the data has neccessarily changed, so use onchange()
<input type="text" name="ID" onchange="my_checkfunc();">
  Naturally, there is also an event handler for elements gaining keyboard focus:
  <input type="text" name="ID" onfocus="my_checkfunc();">
  

Top