Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

  

WWW pages

Tip of the week
(Bulleted options)
The bulleted option does not really work in HTML, and it is extremely difficult to get any form of control on how the list is produced. Thus a better approach is to use a table to align the text in the list. For example in the table given in the second column, I have used a table with two columns and two rows. Here is the basic layout, with a border included for you to see how it is produced:
Cleaner interface. The basic menu now fits into the full page, and can be expanded, as required.
Easier updates, as I just have to change a single file, rather than all of the pages when there is a change.
External file reference, which reduces the ammount of code in each page.
If the border is taken away (and setting the Border parameter to zero) and the background color to the background color of the background, then the user will not know that a table has been used. Simple, but affective, as users like to see some alignment of the text on bullets. The parameters for the bulletted table should be:
cellpad=0; cellspace=0;
border=0
Also, make sure that the cell alignment for each cell of the table is set to Top.
Sometimes the bulletted list can get a bit cramped. There's two ways to get round this. The first is to give each row a given height (in this case it is 40 pixels):
Eggs.
Bacon.
Cheese.
or you can put a line divider after each of the options (which is useful if there are vary levels of text in each bulletted list. Obviously the borders around the table should be invisible (but I've shown them for clarity):
Eggs. dfs dfs dfasd fs sd
Bacon. sdfs
Cheese. sdf sdfas dfa sdfasdf as dfasd

 

 

WWW pages of the past (July 2002 - V)

JavaScript is an excellent way of integrating user interaction, and for calling-up dynamic elements. ASP, JSP and PHP all integrated code which are processed by the server (these are known as server-side includes), while JavaScript and VBScript are processed by the client (which is known as client-side includes). The great advantage of server-side includes, is that you can test them on the server, and you can be sure that they work with every browser, as the server converts the included code into standard HTML. Unfortuately many WWW servers limit the usage of the includes, thus, in many cases, JavaScript must be used to overcome this problem.

I've included a few examples of JavaScript below, so that you can get an idea of the power of JavaScript.

Page details

<script>
with (document)
{
document.write("Title of this page: <B>");
document.write(title + "</B>");
document.write("<BR>Bk color: <B>");
document.write(bgColor + "</B>");
document.write("<BR>Fg color: <B>");
document.write(fgColor + "</B>");
document.write("<BR>Links: <B>");
document.write(links + "</B>");
document.write("<BR>Modified: <B>");
document.write(lastModified + "</B>");
}
</script>

and the executed code:

Date and Time

Current time is
<script>
var dat=new Date();; document.write(dat.getHours() + ":" + dat.getMinutes());
</script>

and the executed code:

Current time is

Date and Time

This example shows how JavaScript uses arrays, with the date and time functions.

<script>
var dat=new Date(),
mon=["Jan","Feb", "Mar", "Apr", "May", "June", "July","Aug","Sept","Oct","Nov","Dec"];
document.write("Month is ");
document.write(dat.getMonth());
document.write(" and the name of the month is "
document.write(mon[dat.getMonth()]);
</script>

and the executed code:

Menu options

<script>
function chback(selObj)
{
document.bgColor=
selObj.options[selObj.selectedIndex].value
}
</script>
<form>
<select name="select" onChange="chback(this)">
<option selected>Bg Color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
<option value="Orange">Orange</option>
<option value="Cyan">Cyan</option>
<option value="Magenta">Magenta</option>
</select>
</form>

and the executed code:

HTML processing

<script>
var fsize;
for (fsize=1;fsize<=5;fsize++)
{
document.write("<br> <FONT SIZE = ");
document.write(fsize + ">");
document.write("Hello</FONT>");
}
</SCRIPT>

and the executed code:

HTML processing

<FONT COLOR="GREEN">
<script>
var dat=new Date();;
hr=dat.getHours();
if (hr<12)
{
document.write("Good Morning!");
}
else
{
document.write("Good Afternoon!");
}
</script>
</FONT>

and the executed code:

If you interested, here are some more examples.