HTML File Pattern

Code in this post can be obsolete, however, principles and theory may still apply.

We don’t create HTML files too often these days, nevertheless, here is the pattern.

<!-- vim: ts=2:sw=2:nu:fdc=2:spell

An Application Page

@author    Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date      2. April 2008
@version   $Id$

@license application.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the 
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.

License details:

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css">
  <link rel="stylesheet" type="text/css" href="css/icons.css">
  <link rel="stylesheet" type="text/css" href="css/application.css">
  <link rel="shortcut icon" href="img/extjs.ico">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <script type="text/javascript" src="application.js"></script>
  <title id="page-title">Application Title</title>

<!-- delete following line if you don not want stats included -->
<!-- eof -->


Basic HTML Page

<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->

<!-- Each valid html page must have a head; let's create one. -->
  <!-- The following line defines content type and utf-8 as character set. -->
  <!-- If you want your application to work flawlessly with various local -->
  <!-- characters, just make ALL strings, on the page, json and database utf-8. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <!-- Ext relies on its default css so include it here. -->
  <!-- This must come BEFORE javascript includes! -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

  <!-- Include here your own css files if you have them. -->

  <!-- First of javascript includes must be an adapter... -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

  <!-- ...then you need the Ext itself, either debug or production version. -->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>

  <!-- Include here your extended classes if you have some. -->

  <!-- Include here you application javascript file if you have it. -->

  <!-- Set a title for the page (id is not necessary). -->
  <title id="page-title">Title</title>

  <!-- You can have onReady function here or in your application file. -->
  <!-- If you have it in your application file delete the whole -->
  <!-- following script tag as we must have only one onReady. -->
  <script type="text/javascript">

  // Path to the blank image must point to a valid location on your server
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

  // Main application entry point
  Ext.onReady(function() {
	// write your application here

<!-- Close the head -->  

<!-- You can leave the body empty in many cases, or you write your content in it. -->

<!-- Close html tag at last -->


Follow me:
Latest posts by saki (see all)

4 Responses

  1. I include scripts inside the body. browsers will load them much faster , and the same time will already show background/ whatever. it’s because some simultaneous-loading limitations for the scripts in header.

  2. I have added doctype to this template. If you encounter some strange rendering issues in Internet Explorer, one of the first steps is to remove the doctype and let IE run in quirks mode.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?