Developing in HTML, CSS, and Javascript

Working in HTML, CSS, and Javascript is not difficult for anyone that has some background in programming. But even without a programming background, the basics are fairly easy to comprehend. What follows is a very brief introduction to developing in HTML, CSS, and Javascript and is not intended to be an indepth description. This is also a convienent way for me to keep notes on some HTML, CSS, and Javascript structures that I commonly use.

HTML (Hypertext Markup Language) is a "markup" language. Markup language processors were very popular in the early days of computers when graphic enhances word processors still being developed. A "markup" language document would include embedded commands that describe how the users wants his/her document formatted. For example, you might want some header text centered on a page, but a paragraph below it printed "justified" (blocked left and right). So in your document you might include a ".center" command on a single line, followed by you header text. The commands before the ".center" command define the left and right margin, in characters.

.lm 0, .rm 28
.center
This Is A Header
.justify
Yadada Yadada Yadada This is the text of the document.

The "markup" language processor would then recognize the ".center" command and output the header text to the printer with the necessary spaces needed to center the text. It would then see the ".justify" command and process the following text line as a justified paragraph. The output might then look like the following output.

      This Is A Header
Yadada Yadada Yadada This is
the text of the document.

Of course, in HTML the markup would look a little bit different, but the outcome would be the same.

<h1 style="text-align:center;">This Is A Header</h1>
<p style="text-align:justify;">Yadada Yadada Yadada This is the text of the document.</p>

CSS (Cascading Style Sheet) is a styling method that helps simplify a HTML document. Inside the CSS section or document, default styling can be defined and applied to the entire document. You can, for example, define a default style for every paragraph in a document, like font type, font size, boarder alignment, etc.. Then define variations of the default for special cases, like quoting or italics.

For HTML/CSS, your browser is the "markup" language processor and viewer all in one. In HTML/CSS, the same output could be generated, but things might look a little more complicated. However, that complication greatly extends is usefulness and capabilities. The code below wraps a "container" around the text to be printed and than defines how that container is going to treat the text that's inside.

<style type="text/css">
  #text-container {
    font: 10px/1.2 Courier, monospace;
    width: 16.8em; /* 28 x 0.6 (the width/height ratio of Courier) */
    height: 6em; /* 5 x 1.2 (line-height is 1.2) */
    overflow: hidden;
  }
</style>

<div id="text-container">
  <h1 style="text-align:center;">This Is A Header</h1>
  <p>Yadada Yadada Yadada This is the text of the document.</p>
</div>

This Is A Header

Yadada Yadada Yadada This is the text of the document.

Javascript can be be easy to use or difficult to use, depending on how much effort you want to put into a page. On it's own, a web page created with only HTML and CSS is mostly static. It doesn't do much but sit there. You can make color changes or font changes that are triggered by a cursor passing over some test, but that's about it. However, adding some Javascript makes the page dynamic. What's on the page can change based on user interaction.

From simple operations, like dropdown menus or enlarging images, to handling user input and displaying the results of a calculation.

My HTML, CSS, and Javascript

It is a pretty simple operation for anyone to view the HTML, CSS, and Javascript source code for a page. I don't have any intension of showing you how. If you don't know how, viewing the source code is probably pointless anyway. However, I don't include any scripting with the intent of blocking access to the source code.

What you will find, if you view the Javascript source code, is that very little of the code is dedicated to solving an equation. The equations governing some of my pages, like Ohm's Law, are incredibly simple. You could easily perform the calculations on a simple calculator. So most of the Javascript is used to manage input and output. In many cases, like the Ohm's Law page, the input data might include a input box (current) plus an associated dropdown menu for the dimension (uA, mA, A). The program itself requires that input in Amps so the javascript that reads this input must read the value from the box and then adjust it based on the dimension dropdown menu. There is far more code dedicated to reading the input data then there is to use it in a calculation.

Green Bar with Red Centered Text and Top Button

This code generates a wide green bar just like the one shown above. It is generally used as a section separator and provides a easy link so you can get back to the top of the page. The image "images/topgrbg.gif" is a green gradiant and the image "images/top.png" is the "Top of Page" button image.

To convert the code so that it is viewable I use http://www.freebits.co.uk/convert-html-code-to-text.html

CSS Code
  /* Horizontal Green Bar, 19 Pixels High */
  .h_green_bar { width: 100%; height: 19px; border: solid 0px #000000;
    padding: 0px; border-collapse: collapse; // 'cellspacing' equivalent }

  .h_green_bar td { width: 100%; background-image:url('../images/topgrbg.gif');
    font-family: Arial,Helvetica; font-size: 12pt; font-weight: bold;
    color: #000000; text-align: center; }
Place this code as the first line right after the body tag
<A NAME="Page_Top"></a>
Then place the green bar code anywhere on the page
  <table class="h_green_bar"><tr><td style="color: #8B0000;">
  <a style="float: right;" href="#Page_Top">
  <img src="images/top.png" alt="" border="" /></a>
  Green Bar with Red Centered Text and Top Button
  </td></tr></table>

Inner Page Navigation Menu

  <a name="Introduction"></a>
  <div id="slantedmenu">
  <ul>
  <li><a href="#Introduction">Introduction</a></li>
  <li><a href="#Description">Description</a></li>
  <li><a href="#Initial_Input">Initial Calculations</a></li>
  <li><a href="#Xfmr_Spec_Input">Secondary</a></li>
  <li><a href="#Current_Load">Load Currents</a></li>
  <li><a href="#Final_Data">Final Design</a></li>
  </ul>
  </div>

Drawing Canvas

HTML for including on your web page. The following code generates a 300px by 300px drawing canvas with an ID. This uses a Javascript drawing package called jsDraw2d.

Documentation: Documentation of jsDraw2D Javascript 2D Graphics Library.
Add following code inside <head> tag or just after <body> start tag.

<script type="text/JavaScript" src="js/jsDraw2D.js"></script>
The html div element on which you are going to draw, should have style as specified for the div element below, If drawing is to be limited within the width and height of the canvas div element. You can use multiple div element for drawing. Then you require to create that many objects of jsGraphics.

<div id="canvas" style="overflow:hidden; position:relative;
width:300px; height:300px; background-color:#C6F7BD;">
or
<div id="canvas" style="position:relative;width:600px;height:300px;"></div>
Javascript to talk to the canvas. This code initiates a drawing by referencing canvas in the HTML document by ID. While the ID of the canvas and the function are the same in the example, they can be different.

function Draw() {
  // Set the font type
  var font=new jsFont("Comic Sans MS","bold","12px");
  // Create jsGraphics object
  var gr = new jsGraphics(document.getElementById("canvas"));
  // Create jsColor object
  var col = new jsColor("red");
  // Create jsPen object
  var pen = new jsPen(col,2);
  // Define some 4, 2, and 1 pixel wide drawing pens.
  var blackPen4=new jsPen(new jsColor("black"),4);
  var redPen2=new jsPen(new jsColor("red"),2);
  var greenPen2=new jsPen(new jsColor("green"),2);
  var purplePen2=new jsPen(new jsColor("#800080"),2);
  var bluePen2=new jsPen(new jsColor("blue"),2);
  var blackPen2=new jsPen(new jsColor("black"),2);
  var redPen=new jsPen(new jsColor("red"),1);
  var greenPen=new jsPen(new jsColor("green"),1);
  var purplePen=new jsPen(new jsColor("#800080"),1);
  var bluePen=new jsPen(new jsColor("blue"),1);
  var blackPen=new jsPen(new jsColor("black"),1);
  var grayPen=new jsPen(new jsColor("#D3D3D3"),1);
  // Set the point of origin, coordinate system, scale, and grid marking.
  gr.setOrigin(new jsPoint(150,150));
  gr.setCoordinateSystem("cartecian");
  gr.setScale(1)
  gr.showGrid();
Examples of Javascript drawing commands.

  // Draw a red filled rectangle that is 14px wide and 60px high,
  // starting at (-80,30) (upper left).
  gr.fillRectangle(new jsColor("#ff0000"),new jsPoint(-80,30),14,60);
  // Draw a line with a 2px wide pen starting at (-85,30) to (85,30).
  gr.drawLine(blackPen2,new jsPoint(-85,30),new jsPoint(85,30));
  // Draw an arc
  gr.drawArc(blackPen2,new jsPoint(-85,25), 10, 10, 90, 90);
  // Add text - drawText(text, point, [font], [color], [width], [align])
  gr.drawText("Band 1", new jsPoint(-140,-30),
    new jsFont("Comic Sans MS","bold","12px"), bluePen.color, 50, "left");
Draw a Resistor (Vertical or Horizontal). Only initialize the Res_H_X, Res_H_X, Res_V_X, and Res_V_Y arrays once anywhere before you start drawing resistors. The vertical resistor starts at (Rn_X_Start,Rn_Y_Start) and draws down. The horizontal resistor starts at (Rn_X_Start,Rn_Y_Start) and draws right. Where "n" indicates the resistor number. Replace "n" with the resistor number for use later.

  // Horizontal Resistor Array (Small)
  var Res_H_X = new Array( 5,3,5,5,5,5,3,5);
  var Res_H_Y = new Array( 0,5,-10,10,-10,10,-5,0);
  // Vertical Resistor Array (Small)
  var Res_V_X = new Array( 0,-10,20,-20,20,-20,10, 0);
  var Res_V_Y = new Array( -5,-5,-10,-10,-10,-10,-5,-5);
  //-------------------------------------------------------------------------------
  // Horizontal Resistor Array (large)
  var Res_H_X = new Array( 25,5,10,10,10,10,5,25);
  var Res_H_Y = new Array( 0,10,-20,20,-20,20,-10,0);
  // Vertical Resistor Array (Large)
  var Res_V_X = new Array( 0,-10,20,-20,20,-20,10, 0);
  var Res_V_Y = new Array( -25,-5,-10,-10,-10,-10,-5,-25);
  //-------------------------------------------------------------------------------
  // Draw a Resistor starting at X_Start,Y_Start Horizontally
  var Rn_X_Start = -50; Rn_Y_Start = 65; // Define Left point and draw left to right
  X_From = Rn_X_Start;Y_From = Rn_Y_Start; // Initialize the From point
  for ( I = 0; I<8; I++ ) {
     X_To = X_From+Res_H_X[I];Y_To = Y_From+Res_H_Y[I]; // Update the To point
     // Draw a segment
     gr.drawLine(greenPen2,new jsPoint(X_From,Y_From),new jsPoint(X_To,Y_To));
     X_From = X_To;Y_From = Y_To; // Make the new From point the old To point
  }
  H_Width = 120; V_Offset = 40;
  Rn_X_End = X_From; Rn_Y_End = Y_From; // Define resistor end point
  //-------------------------------------------------------------------------------
  // Draw a Resistor starting at X_Start,Y_Start Vertically
  var Rn_X_Start = 110; Rn_Y_Start = 0; // Define top point and draw top to bottom
  X_From = Rn_X_Start;Y_From = Rn_Y_Start; // Initialize the From point
  for ( I = 0; I<8; I++ ) {
     X_To = X_From+Res_V_X[I];Y_To = Y_From+Res_V_Y[I]; // Update the To point
     // Draw a segment
     gr.drawLine(greenPen2,new jsPoint(X_From,Y_From),new jsPoint(X_To,Y_To));
     X_From = X_To;Y_From = Y_To; // Make the new From point the old To point
  }
  H_Width = 60; V_Offset = -20;
  Rn_X_End = X_From; Rn_Y_End = Y_From; // Define resistor end point