HTML page template

See more about:

All pages need to be complete, with the <html> tag, <head> tag, etc. Here is the basic template:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TITLE</title>
  </head>
  <body>
    BODY
  </body>
</html>

The lesson The structure of a Web page explains all the pieces.

Adding CSS

If you use CSS, the template is:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="FILE PATH">
    <title>TITLE</title>
    <style type="text/css">
      STYLES
    </style>
  </head>
  <body>
    BODY
  </body>
</html>

Line 5 loads an external style sheet. You can use the same style sheet on many pages. Change something in the style sheet, and every page using the style sheet changes.

Lines 7 to 9 define on-page styles. They only apply to the page containing them.

You can use both an external style sheet and on-page styles on the same Web page.

Adding JavaScript and jQuery

If you want to use JavaScript on your page, the template is:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="FILE PATH">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="FILE PATH"></script>
    <title>TITLE</title>
    <style type="text/css">
      STYLES
    </style>
    <script type="text/javascript">
      SCRIPT
    </script>
  </head>
  <body>
    BODY
  </body>
</html>

Line 6 loads the jQuery library. It loads version 1.3.2. There are newer versions you can use, if you want.

Line 7 loads JavaScript from an external file. This lets you share JavaScript across pages. Change the external file, and all pages that include it change.

Lines 12 to 14 show how you add JavaScript to just the current page.


Lessons

How to...


Dogs