Creating a template page.

In most circumstances you will want your site to have the same basic layout, navigation and design. This means we can reuse a lot of the HTML as a good portion of it will be the same from page to page. For this we will create a "Template" HTML file that we can open and reuse, just changing the saved name of the file for new pages.

Let me show you what a bare minimum structure of an HTML file looks like.

Example: 
<html> 
  <head> 
    <title> </title> 
  </head> 

  <body> 

  </body> 
</html>

HTML tags are specific words surrounded with less than "<", greater than ">" characters. Every html document should have at least these basic tags. The file starts out with an "opening" HTML tag, which tells the browser that the content to follow should be treated as and interpreted as HTML. At the end of the file you see the "closing" HTML tag which is the same as the opening tag except the tag name is preceding with a slash "/". Every tag that is opened must be closed (though there are a few that close themselves within the opening tag as we will see soon). This encapsulates its content and makes the container we talked about. A complete opened and closed tag sequence is referred to as an HMTL "element".

Think of this in terms of boxes. The HTML element is a big box. Inside that box we have 2 more boxes, "head" and "body". Inside the "head" box we have another box named "title". HTML is really nothing more than putting boxes inside boxes, knowing which boxes will fit in what other boxes, and putting the content content to be displayed on the web page in the right box.

The head and body tags are required. The content within the "head" element contains information for the browser that isn't displayed to the user but provides information such as the title of the document to be displayed at the top of the page, as well as provides links to other files that the web page might depend on to be displayed properly, such as CSS and Javascript. The content in the head section can be referred to as meta data, as it provides information "about" the web page.

The body section of the web page is where you put all the content that you want displayed to the pages' visitors. You use other smaller boxes (HTML elements) within the body to structure the content so that it is displayed appropriately as paragraphs, lists, images, tables, etc.

Now that you have seen the bare minimum, lets start with the right way to do it and build from there. The web has gotten very advanced and as such has designed some rules of standardization to keep us playing the game right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
  <head> 
    <title> </title> 
  </head> 

  <body>

  </body> 
</html>

The first line is necessary in the sense of standardization and validation and is called a "Document Type Definition" (DTD). Modern versions of HTML are actually considered XHTML since they use a mix of XML (extensible markup language) and HTML. XML requires a DTD to validate that it is structured correctly.

There are various versions and levels of strictness of DTD, but XHTML 1.0 Strict is very common. It basically defines this file as XHTML 1.0 with a strict level of validation. You don't have to worry about this that much, but if you are interested (or bored) you can find out more at http://www.w3.org. For now just include this in your template file and you wont have to worry about it again.

The second line is the opening html tag with some more DTD validation "attributes" added. "Attributes" are name/value pairs that are included in the opening tag of an element that can define some extra "features" for the element. We will see many as we go along.

As you can see this is the same basic structure as before, its just a more proper and technically accurate way of going about web page design and development.

Our First Save

Now lets practice saving our template. Once we have a saved template, we can open it up whenever we want to create a new page and save it with the new files name and start from there! This saves us the hassle of having to re-type all the same stuff.

On Mac TextEdit, make sure the document is plain text, then select "Save As..." or "shift+command+S" and save the file as "template.html" inside your project folder.

On Windows NotePad, select "Save As", name the document "template.html", make sure "All Types" is selected from the Save as Type menu, and save the file inside your project folder. Wala! You have a website template file. Of course it doesn't have any content yet, but it will soon.