[ -Tech-Eclectic- ] : [ -Anything New- ]

Tips For Using Internet Explorer Will Appear Here Randomly

 

 
  Tech-Eclectic HTML+

 

   

 
Welcome to my HTML page. This page is still under construction.
( pssst... did you add me to your favorite places yet? )

 

   

 
You should have a good understanding of basic HTML before you try adding dynamic content. But it is worth every minute you spend learning to make your pages more inter-active and interesting. Almost anything you can imagine is possible with the use of some dynamic commands.

Layers or Divisions?

One of the most powerful options available to a webpage writer is the use and manipulation of layers(divisions) on a page. This feature is supported by the 2 most popular browsers; IE & Netscape, but in different ways. By using a few simple scripts you can hide, show, or move entire sections.

Netscape refers to these areas as layers, while Internet Explorer refers to them as divisions. When you create an area as a layer(div), you use the <div> ... </div> to set the start and end. A layer(div) can contain any HTML code, graphics, more javascripts, ... basically anything you can put on a page can be defined as layers(divisions).

You might be asking yourself 'Why do I need to create divisions? My page works fine the way it is...'. The reason you want to use divisions is to gain maximum control over your page content by controlling the divisions properties in reaction to your visitors actions(inter-activity).

Properties

Once you have defined a layer, it is possible to refer to all of it properties, and change any of them instantaniously. 'What properties?' you ask? ... Here's a short list of things you can change and control:

  • background color
  • text color
  • text font
  • text size
  • text weight
  • visibility/invisibility
  • screen position from the top
  • screen position from the left
  • movement
  • layer height/layer width
  • position in relation to other layers
  • ... and more ...

Once you begin to work with the properties of objects, you will wonder why you didn't do this long ago! Almost every aspect of your page is easier to design, modify, and control through it's properties.

The most powerful tools to manipulate and make your pages more interactive are the commands that deal with position and visibility. With a little practice and experimentation, you can use these two properties to make your pages much more dynamic.

It is possible to set all the styles of your page in a header section of your page (see below). Or you can use the style parameter in any tag to control or override the default settings.

Here is my menubar division tag:

<div id="menuBar" style="position:absolute;top:-2;left:0;z-index:0;">

Here is my New Stuff division tag:

<div id="daynews" style="position:absolute;top:180;left:320;visibility:hidden;z-index:3;">

 

   

 

CSS - Cascading Style Sheet

Style sheet coding is not hard to learn or understand. If you have done any coding with the HTML font tag, then you are already familiar with most of the code. Controlling the appearance of your page is easier using CSS (Cascading Style Sheet); a long name for simple tool. Style sheets can be external descriptions of a style that you use for many pages, or included on any page in the head of your code, or they can be defined in any HTML tag to override the default style or create a unique style for an item.

Here is a sample style section from this page: (A style set, like this sample, should be in the head of your page.)

<style type="text/css">

p {
font-family: Comic Sans MS,Helvetica,Arial;
font-size: 10pt;
}

.hd1 {
font-family: Comic Sans MS,Helvetica,ArialBold,Arial;
font-weight: Bold;
font-size: 28pt;
color: black;
}

.hd2 {
font-family: Comic Sans MS,Helvetica,ArialBold,Arial;
font-weight: Bold;
font-size: 14pt;
color: black;
}

.coding {
font-family: Helvetica,Arial;
font-size: 10pt;
color: darkblue;
}
</style>

As you can see in this sample, you can define styles for any HTML tag. You can also define your own style name denoted with a period, when you refer to the style do not use the period (hd1, hd2, coding). The style will be applied to all the HTML tags automatically each time you use them. To apply your created style, add a class parameter to the tag like this:

<p class="coding">

This will override the default paragraph style and apply my 'coding' style until another paragraph tag is encountered. Once you have worked with CSS, you won't want to go back to line coding EVERY font characteristic individually on a page!

 

   

 
More information about divisions properties can be found on my Tech Toys page.

Use the menus at the top of the page to access the areas of my site. This is a project in the works so not all the pages have been coded yet... but I'm working on it!