Web Hosting by Netfirms | Free Domain Names by Netfirms

Please refer to your ER&DCI Personal Account Management - Details section, which has simultaneously opened in another web browser window (if you are a member and have logged into your account). While you read this document, you may be automatically logged out of your account (after 10, 15 or 30 minutes) as a security measure. Don't panic, just re-login when you are ready to try out the examples listed here.

We will be listing some techniques, hints and of course examples to help you get started on your web page at the ER&DCI Alumni & Students Community Portal. In the meantime, if you are in a hurry, just enter your details in the form as plain text, save it and view it from the home page using any of the alumni, student, member or search links.

If you are going to upload your details for the first time, it is strongly recommended that you type in a few details, say name, age, present occupation in the details section, save it, and then open the alumni, student, member or search page in a different web browser window. From there, click on the link that lists your name (which you registered with us) and your personal details web page will open, with the content that you entered in the details form.

The Basics with HTML

HTML is an acronym for Hypertext Markup Language, which is a subset of the Standard Graphics Markup Language (SGML). HTML describes what a document should look like (rendered) when interpreted by a client software (web browser) and specifies links to other pages.

No problem, we do not expect you to learn any HTML! You can simply enter plain (ASCII) text using your keyboard or copy and paste it (if you are using a version of Windows OS) into the details form. However, if you would like to create some of those fantastic web pages that captivate your audience, then you would do better to implement a few of the techniques listed below. The rest is left to your imagination...

First of all, you must know what you intend to display on the site. For instance, a private kind of an individual would not like everyone to see his/her date of birth, address, phone number, etc. On the other hand, someone who wishes to use this service as a means to further a career must include such personal details. We suggest you start off midway, and depending upon your preferences and experience, choose one of the alternatives later. Secondly, there is a limited amount of information that you can display as a member (around 6000 characters), due to the restricted amount of disk space we have available. The bottom line is to plan your page intelligently.
For the remainder of this document, we will be considering a simple resume type of document to be displayed on your web page as an example to the illustrations. You may substitute the resume for any other text, the rest of the concept remains the same.

Now that you have been enlightened with so much information, go ahead and type in a few details in the "details text area field" of your form (if you have been logged out automatically, please re-login). For example, enter your name, qualifications and present occupation as we have listed below (do not forget to include all the <, > and the text within as listed, the indentation was included to make it easier to read the text):

<H3>Arun</H3> <H4>Qualifications:</H4> <P>B.Sc., DOEACC 'B' Level</P> <BR> <H4>Present Occupation:</H4> <P>Software Developer at ACME Ltd.</P>

On your web page, this is what you will see (apart from other information about the ER&DCI site...):

Arun Qualifications: B.Sc., DOEACC 'B' Level Present Occupation: Software Developer at ACME Ltd.

Lets break it down – the <H3> is an example of a HTML tag, called opening level 3 heading tag, that encloses some text (Arun) within another tag </H3>, the closing level 3 heading tag. These tags tell the web browser to display the enclosing text in a particular format and layout. Normally, tags are not case sensitive, i.e. <H3>, </h3> are both the same. However, when you open a tag - one without a forward (/) slash say <P>, you must close it also with its corresponding closing tag (</P> - with a forward slash), except for certain tags such as the <BR> (that is used to create a new line in programming terms) and has no closing tag. The <P> tag is used to create a paragraph.

Nuts and Bolts of your web page

HTML includes basic tags – the <HTML> (closing </HTML>), <BODY> (closing </BODY>) and <HEAD> (closing </HEAD>), which are included in all HTML documents. We have already programmed member accounts to include these elements, so you do not have to include any of these tags in your document. Even if you are using any book or material on this subject that mentions the use of these tags or if you have previous knowledge of HTML, carefully exclude the basic elements from the contents of your web page.

The primary component of your page would be text, which must look great! Use the <FONT> tag to specify the type of font you wish to use, such as:

<FONT FACE="Arial" SIZE=2>Some Text</FONT>,

that would be displayed by the browser as:

Some Text

The FACE parameter can contain any font name like "Times Roman", "Courier", "Arial", "sans serif", "serif". Multiple font names separated by commas can be used, in the eventuality the web browser does not support the primary font (the first in the list). Specify the font size using the SIZE parameter. As always, do not forget the closing tag (</FONT>), which indicates the enclosing text to have the particular font. The <B> tag, <I> and <U> tags define Bold, Italic and Underlined text styles, respectively.

Layouts can be described using positioning tags:
<SPACER>, <LAYER> and <SPAN>
or through lists:
<UL> (<LI>, </LI>), <OL> (<LI>, </LI>), <DL> (<DT>, </DT>, <DD>, </DD> </DL>), <MENU>, <DIR> , etc.

Finally, we have tables to provide relatively stable formatting. Let's have a look at what tables can do:

What you type	What is displayed on your web page
<B>My</B> page	My page
Looks like a <U>link</U>	Looks like a link
This is <FONT SIZE=7>big</FONT>	This is big

The source code (as programmer's like to call it) for the above table is:

<table width=100% border=1 cellpadding=5 cellspacing=1> <col width=55%><col with=45% bgcolor="#FFC0CB"> <tr><th>What you type</th><th>What is displayed on your web page</th></tr> <tr><td><B>My</B> page</td><td><b>My</b> page</td></tr> <tr><td>Looks like a <U>link</U></td><td>Looks like a <u>link</u></td></tr> <tr><td>This is <FONT SIZE=7>big</FONT></td><td>This is <font size=7>big</font></td></tr> </table>

Further details on these topics are beyond the scope of this document. The reader is requested to consult the links at the end of this page for further information.

Links and graphics – communication, transportation and expression

Its all very simple, they are used to take us take us to our different destinations. To illustrate, the following line allows us to jump to our home page:

<a href="http://erdci.netfirms.com">Our home site<a>

As you may notice, lower or upper case tags have the same meaning, you only need to get their spelling right! On the other hand, a Url (what is typed after the href= within quotes) must be exact and can be case specific. The text Our home site communicates information about the destination and clicking on the link transports us to the destination, which can be the same or another web page, site Url, or any other network resource. And if all this is not enough, we can express it all using graphics, as explained in the next section.

Ever heard of the saying "a picture is worth a thousand words". You can put it to practical use with the following tag:

<img src="http://erdci.netfirms.com/images/tulips.gif">

to obtain the special effects:
Images can be combined with links, simply replace the text that was typed between the open and closing link tags with the image (<IMG> tag). Please remember, image tags have no counterpart for the closing end! When we use images, the following rule of thumb is applied: for an image consisting of text and or standard graphical objects such as rectangles, circles, squares, triangles (what we have in icons), a GIF format (with a .gif file extension) is selected, whereas, if we have a picture it is better represented using a JPEG (.jpg or .jpeg extension) format.

Now the important part. How do you get your images, pictures, graphics on your web page? Since we do not allow more than one image to be uploaded per member with the added restriction on the size of the image file, this could result in an imageless page. The solution, dear reader, is simple. The image src="" parameter can be made to point to any resource on the web. And there are lots and lots and lots of free resources out there on the internet, including free images, graphics, pictures, icons, etc. And all that you have to do is find those images. Then right click on them, in the drop down menu select 'properties' and check out their Url (address). Otherwise save the web page to your local hard disk (from the 'File-Save As' menu), open the HTML file in your ASCII text editor, wade through HTML, JavaScript, VBScript, CSS code, locate the image Url, break it into its path, name components and then attempt to construct the Url (that usually includes the images folder as in our example above) to the image.

Moreover, we have listed the images that are available on our site for use by members. Refer to the Appendix, section II at the end of this document.

We suspected that. This kind of stuff can be really confusing, especially when one has to tax the brain cells – you know that brain cells only decrease over one's lifetime and they never grow back, so children should be smarter than adults, although the contrary may be due to our inherent ability to better use depleting resources :-)

Relax, close your eyes, take several long and deep breaths, have some coffee or coke (home made lime water works just as fine in my case) and read on, while we spin a magical web we have in store for you!

Cascading style sheets (CSS/CSS2)

We won't go into any details here. All that we would like you to know is that if you are using a Graphical User Interface based Operating System along with a web browser that supports CSS or CSS2, you may find our site to be quite neat, if not attractive! Look at this web page for further hints. It uses CSS too and even for those lesser web browsers that do not support CSS yet, the results are quite fair.
Cascading Style Sheets allow you to separate content from presentation. They allow you to define certain properties for a HTML tag, enabling it to be rendered in a specific manner. Further, several CSS can be combined to give a unique outcome to your page elements. For example, the above block heading "Cascading style sheets (CSS/CSS2)" may appear as large white coloured text on a strip with a black background colour. On a web browser that does not support CSS, you may find it to look somewhat like this:

Cascading style sheets (CSS/CSS2)

And the solution my friend, is that you could also learn to use, at the very least, the style sheets that we have created!

There are two alternatives to having style sheets in your web page:

1) Define CSS rules for some of the elements in your web page, called in-line cascading style sheets. Its simpler only when you have very little content on your site. In all other cases, it starts to become unmanageable if done manually!
An example of a simple in-line css rule (American color is spelled different from British colour, and computer's involve American English) is:

<font style="color: blue;" face="Arial" size=2>Is this text blue in colour?<font>

that gives:

Is this text blue in colour?

Without css support, you would get:

Is this text blue in colour?

Refer to the appendix below for links to further information about CSS.

2) You link in an external CSS file into your web page – that's exactly what we have done and we will show you how to do the same with your web page. Rather than writing all CSS rules yourself (when you may not even know HTML, leave alone CSS), you can make use of the ones that we have written. And based on your feedback, we may further add more rules and improve the existing ones!
Our external CSS file is automatically linked to your web page, so all you have to do make use of them is to include a class= statement along with a parameter in your element. For instance, we have defined a CSS rule for the <B> (bold) tag, by the name of "green-white". This rule causes the enclosed text to be in bold style, with a green foreground colour and a white background colour. To implement it, all you have to do is use the class="green-white" parameter with the <B> tag, as follows:

<B class="green-white">Bold & Green?</B>                     resulting in:                     Bold & Green?

To get the same effect using HTML, you would do the following:

<font color="green"><b>Bold & Green too?</b></font>             to get:               Bold & Green too?

You may only include those css rules that are required. So, how do you know what's required? Well, see what looks great! The best way to use css is to try it out on your web page. Even with the handful of css rules that we have defined, when used in the proper combination can result in thousands of unique web pages, each of which can be captivating in its own light.

You will need to refer to the CSS rules that we have defined, as listed in the appendix below. All the rules that we have defined make use of a selector (HTML tag), such as B.green-white for the css rule used in the above example. Other illustrations include P.blue-text and a.menu for paragraph and link tags respectively. When you make use of any of them, use the value after the dot (.) within the class="" parameter, exactly as we have defined in the corresponding HTML tag. The value before the dot, determines the corresponding HTML tag for which the rule will be applicable, as in the above, the former is for a paragraph (P) tag and the latter for a hyper-link (A) tag. Remember, do not include a class="" parameter with a HTML tag for which no rule exists, even if you do, you would only succeed in creating errors in your page.

For further information, do not hesitate to try out the web links to material on css.

Well, don't worry you won't. Go ahead and try it out if you wish. Each member page is individually generated and displayed, so apart from a leaving a very poor impression on a viewer of your web page, you can't do much damage.
Add to that the possibility that a viewer of your personal web page may some day come across you, whether as a friend, employer, client or even a spouse!!!

The conclusion

This is an analogy of a web page within another web page, and can be used as a reference point for starters. All that you have to do is copy the source code from the text field below (on windows, select code, press Ctrl-C) and paste it into your personal account management details field (Ctrl-V). Then simply replace all the example text with your own details. Enjoy.

Source code (indented to make reading a little easier):

Examine, experiment, take a shot. It certainly will feel good, at least where the effort is involved. And then, who knows how wonderful all this may turn out to be...

only time can tell...

Appendix

1) An Excellent HTML Guide for beginners by Joe Barta

2) Barebones Guide to HTML – a handy reference

3) A short guide on cascading style sheets by U. Fredriksson

4) The Official Reference (w3.org) – from HTML to CSS

Please note that at present we have not included any form handling, scripting or cgi-bin programming for member sites, although we may do so in the near future.

To include any of these images on your web page, simply include the following source path:

<IMG SRC="http://erdci.netfirms.com/images/spanner.gif">

and replace the spanner.gif with any of the self-descriptive file names listed below:

We will be adding more images and graphics, so stay tuned!

 /* note: margins = outer (invisible) space
	borders = middle (invisible/visible) space
	padding = inner (invisible) space
 */

 /* Standard black box with text-width, single thin borders, contains padding */

 DIV.box {
  margin: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  padding: 0px;
 }
 
 /* Standard red box with text-width, single thin borders, contains padding */

 DIV.box-red {
  margin: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: red;
  padding: 0px;
 }
 
 /* Box for dividing into 2 halves, 50% width with no margins, thin border, no padding */

 DIV.box-half	{
  margin: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  padding: 0px;
  width: 50%;
 }
 
 /* Box enclosed in double borders will be as wide as the web page */

 DIV.box-big {
  margin: 0px;
  border-bottom-style: double;
  border-left-style: double;
  border-right-style: double;
  border-top-style: double;
  width: 100%;
 }
 
 TD.top-right	{	/* margin=outside(invisible space), border=middle(visible line), padding=inside(invisible space) */
  margin: 0px; 	/* margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; */
  border-left-width: 0px;	/*border-width: 1px;*/
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0px;
  border-style: solid;
  border-color: black;
  padding: 2px;
  /*width: 33%;*/
 }
 
 TD.top {
  margin: 0px;
  border-left-width: 0px;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-style: solid;
  border-color: black;
  padding: 2px;
 }
 
 TD.left {
  margin: 0px;
  border-left-width: 1px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-style: solid;
  border-color: black;
  padding: 2px;
 }
 
 HR.black {
  color: black;
  width: 100%;
  height: 1px;
 }
 
 H2.black-white  {
  font-family: Copperplate Gothic Light, Courier, serif;
  color: #00000;		   /* black */
  background-color: #FFFFFF;	  /* white */
  font-size: 180%;
  text-decoration: underline;
  margin: 1px;
  padding: 0px;
 }
 
 H2.white-black	  {
  font: normal 160% Lucida Sans Unicode, Arial;
  color: #FFFFFF;		   /* white */
  background-color: #000000;  /* black */
  font-weight: bold;
  margin: 0px;
  padding: 1px;
 }
 
 H3.white-black	  {
  font: normal 125% Lucida Sans Unicode, Arial;
  color: #FFFFFF;		   /* white */
  background-color: #000000;  	/* black */
  font-weight: bold;
  margin: 0px;
  padding: 1px;
 }
 
 H3.blue-white	  {
  font: normal 125% Lucida Sans Unicode, Arial;
  color: #0000FF;   /* blue */
  background-color: #FFFFFF;	/* white */
  text-decoration: none;
  padding: 2px;
 }
 
 H4.blue-white	  {
  font: normal 120% Lucida Sans Unicode, Arial;
  color: #0000FF;   /* blue */
  background-color: #FFFFFF;	/* white */
  margin: 0px;
  padding: 1px;
 }
 
 H4.red-white	  {
  font: normal 120% Lucida Sans Unicode, Arial;
  color: #FF000F;   /* red */
  background-color: #FFFFFF;	/* white */
  margin: 0px;
  padding: 1px;
 }
 
 H4.black-green	  {
  font: normal 120%/125% Lucida Sans Unicode, Arial;
  color: #000000;   /* black */
  background-color: #90EE90;	/* light green */
  margin: 0px;
  padding: 1px;
 }
 
 H4.black-red	  {
  font: normal 120%/125% Lucida Sans Unicode, Arial;
  color: #000000;   /* black */
  background-color: #FFA500;	/* orange red */
  margin: 0px;
  padding: 2px;
 }
 
 H4.red-green  {
  font: normal 115% Lucida Sans Unicode, Arial;
  color: #FF0000;   /* red */
  background-color: #90EE90;	   /* light green */
  font-weight: bold;
  margin: 0px;
  padding: 2px;
 }
 
 H4.white-black	  {
  font: normal 120%/125% Lucida Sans Unicode, Arial;
  color: #FFFFFF;   /* white */
  background-color: #000000;	/* black */
  padding: 1px;
 }
 
 B.red-white	 {
  font: normal 80% Verdana;
  color: red;
  background: white;
  font-weight: bold;
 }
 
 B.green-white	 {
  font: normal 80% Verdana;
  color: #008000;   /* green */
  background: #FFFFFF; /* white */
  font-weight: bold;
 }
 
 P.black-text	 {
  font-family: Tahoma, Verdana, sans serif;
  color: black;
  font-size: 80%;
  line-height: 100%;   /* height: 1%; */
  margin: 0px; 		   /* width: 100%; font-style: normal; font-weight: normal; */
  border: 0px;  	   /* border-style: none; border-color: black; border-width: 1px; */
  padding: 2px;
 }
 
 P.blue-text	  {
  font-family: Verdana, Tahoma, sans serif;
  color: #0000FF;   /* blue */
  font-size: 75%;
  line-height: 100%; /* width: 100%; font-style: normal; font-weight: normal; */
  margin: 0px;
  border: 0px;
  padding: 2px;
 }
 
 P.dark-blue-text	  {
  font-family: Verdana, Tahoma, sans serif;
  color: #00008B;   /* darkblue */
  background: #ADD8E6; /* lightblue */
  font-size: 75%;
  line-height: 100%; /* width: 100%; font-style: normal; font-weight: normal; */
  margin: 0px;
  border: 0px;
  padding: 2px;
 }
 
 /* Use an Image/Background of some colour (say light pink/blue) on which to display menu links */
 a.menu:link {
  font-family: Lucida Sans Unicode, sans serif;
  color: #8B0000; /*darkred*/
  font-size: 100%;
  font-style: normal;		/* italic */
  font-weight: bold;
  text-decoration: underline;
 }
 a.menu:visited {
  font-family: Lucida Sans Unicode, sans serif;
  color: #9400D3;  /* darkviolet */
  font-size: 100%;
  font-weight: bold;
  text-decoration: underline;
 }
 a.menu:hover {
  font-family: Lucida Sans Unicode, sans serif;
  color: #FF0000;  /* red */
  background-color: #F5FFFA; /* mint cream */
  font-size: 100%;
  font-weight: bold;
  text-decoration: underline;
 }
 a.menu:active {
  font-family: Lucida Sans Unicode, sans serif;
  color: #FF0000; /* red */
  background-color: #F5FFFA; /* mint cream */
  font-size: 100%;
  font-weight: bold;
  text-decoration: underline;
 }
 
 /* Normal links must be displayed on white background only */
 a.normal:link    {
  font: normal 95% Verdana, Arial;
  color: #00008B;   /* dark blue */
  text-decoration: underline;
 }
 a.normal:visited {
  font: normal 95% Verdana, Arial;
  color: #808080;   /* gray */
  text-decoration: underline;
 }
 a.normal:hover   {
  font: normal 95% Verdana, Arial;
  color: #0000FF;   /* blue */
  background-color: #FFC0CB; /* pink */
  text-decoration: none;
 }
 a.normal:active  {
  font: normal 95% Verdana, Arial;
  color: #0000FF;   /* blue */
  background-color: #FFC0CB; /* pink */
  text-decoration: none;
 }
 
 /* text links must be displayed on white/light blue background only */
 a.text:link {
  font-family: Arial, Tahoma;
  color: #9400D3;  /* darkviolet */
  font-size: 95%;
  font-style: normal;		/* italic */
  font-weight: normal;
  text-decoration: underline;
 }
 a.text:visited {
  font-family: Arial, Tahoma;
  color: #4B0082; /* indigo */
  font-size: 95%;
  text-decoration: underline;
 }
 a.text:hover {
  font-family: Arial, Tahoma;
  color: #800080;  /* purple */
  background-color: #FFFFF0; /* ivory */
  font-size: 95%;
  text-decoration: underline;
 }
 a.text:active {
  font-family: Arial, Tahoma;
  color: #800080;  /* purple */
  background-color: #FFFFF0; /* ivory */
  font-size: 95%;
  text-decoration: underline;
 }