TJKDesign: Home Page

Find a broken link or an error? Please report it!

Deconstructing a TJK.Template...

Our Templates come with many features, including:

  • A script that either opens a link in a custom popup window or in the main window depending on JS support.
  • An external JS file that uses URI's "parameters",
  • A SSI that holds the navigation menu,
  • An HTML file that lists the complete markup and that includes hyperlinks to online resources,
  • A CSS rule to keep the navigation current state ["uberlink"],
  • CSS rollover and/or disjointed rollover effects,
  • Up to 4 different CSS branching techniques,
  • A Print style Sheet that prints the main content only [showing URIs next to external links],
  • A "print this page" script,
  • A custom page where JavaScript-challenged browsers are re-directed,
  • A CSS rule that puts a small icon next to your links to external URIs,
  • A basic Form with a text field default value that toggles onfocus/onblur,
  • A CSS rule that swaps input field background-color,
  • A Form that doesn't break a layout in NN4,
  • Different link styles within the same page,
  • A script to submit the active document to the validators [markup and CSS],
  • The markup to include a Favicon,
  • A CSS rule for acronyms (underline and help cursor),
  • A SkipNav link, Accesskeys, and much more (see "Benefits")...

Take note Note that some browsers may ignore a few CSS rules (for example, MSIE ignores the pseudo class :focus).

Check the code of one of our Templates (Slanted) below to see that there is a lot packed in our markup. This listing comes in an HTML file where every "good read" link is clickable.

Take note Note that you will need Internet access to visit the "Good read" links.

Use of a XHTML Strict DTD Declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

Comment including an URI to learn about Doctypes
<!-- Good read: http://www...

Use of proper attributes in the html tag:
<html xmlns="http://www.w3.org/1999/xhtml"...

Comment including an URI to learn about XHTML
<!-- Good read: http://www.w3.org/...

Use of a Robots Meta tag:
<meta name="robots"...

Comment including an URI about the Robots Meta Tag:
<!-- Good read: http://www...

Use of more Meta tags:
<meta http-equiv="Content-Type...
<meta name="author...
<meta name="Copyright...
<meta name="description...
<meta name="keywords...

Comment including an URI about these Meta Tags:
<!-- Good read: http://www....

Use of a Meta tag to disable Internet Explorer image toolbar feature:
<meta http-equiv="...

Use of a Favicon:
<link rel="...

Comment including an URI about using/creating a Favicon:
<!-- Good read: http://www...

The title container is a very important element of a web page:
<title>Slanted</title>

Use of the <link> tag to point to the Home page:
<link rel="Home" href="/" />

Use of an external JavaScript file that includes a "print this page" script + another to open a custom popup window:
<script type="text/javascript" src="js/basic.js"></script>

<style type="text/css" media="screen">
<!--
@import url(css/style.css);
...
-->
</style>
<!--[if gte IE 5]>
...
<!--[if IE 5]>
...
<script type="text/JavaScript">
<!--
if(!document.getElementById)...
//-->
</script>

Comment including an URI about CSS branching techniques
<!-- Good read: http://www...

Comment including an URI about IE Conditional Comments
<!-- Good read: http://www...

Use of a print style sheet
<link rel="stylesheet" type="text/css" href="css/print.css"...

Comment including an URI about Print Style Sheets
<!-- Good read: http://www...

</head><body>

Including a container that is to be printed only:
<!--#include file="inc/printheader.inc" -->
<!-- do not forget to edit this file [inc/printheader.inc] -->

A "skipnav container" to skip the navigation menu and jump to the main content. It includes a proper anchor name to create a "trouble free top of the page" link.
<div id="skipnav"><a name="ztop">...

Use of simple basic names for the containers
<div id="wrapper"><div id="header">

Links that include a referrer script to validate the document
<ul><li><a href="http://jigsaw.w3.org/css...

A form with a field that includes the "label" property and a script to toggle its default value (onfocus/onblur)
<form action=...

Comment including an URI about Forms and Accessibility
<!-- Good read: http://www...

Headings are very important elements of a web page
<h1>Heading</h1>

Call to the custom printIt() function. Note that we're using the onkeypress event and that we're not using null links
<a title="Print this page!" href="javascript.html" onclick="printIt();return false" onkeypress="printIt();return false">Print this page</a>

Use of a SSI file for the navigation menu
The menu itself contains the markup to create Pure CSS Disjoint Rollovers
<!--#include file="inc/menu.inc" --></div>

Use of CSS to keep the current navigation state ["uberlink"]
<!-- set this ID (nav#) to the corresponding navigation item (menu1, menu2, etc.) you want to "highlight" -->

Use of an external JavaScript file to write content to the page depending on an URI "parameter"
<script type="text/javascript" src="js/addcontent.js"></script>

</div><!-- /sidebar --><div id="main">

Anchor to be used with the "SkipNav" link
<!-- Skip Navigation ...

...

"Trouble free" top of the page link:
<p><a href=...

Closing DIVs are followed by HTML comments:
</div><!-- /main -->

A "cross-browsers-low-layout-impact" solution to clear floats:
<div style=...

Comment including an URI about clearing floats:
<!-- Good read: http://www... 

<div id="footer"> ... </div><!-- /footer -->
</div><!-- /wrapper -->
<div id="copyright"> ... </div><!-- /copyright -->
</body></html>

Check "Is this for me?" to see if you can benefit from our products.