How to Create a Template
When you are creating a multi-page website in a plain-text editor, you may find it helpful to build a page template. By creating and designing a template page of the website—with the <head> and <body> sections in place—you can save a copy of the template and then use it to create additional pages for your website.
To start a site template
First things first, you need to create the template file:
- Open a new file in your plain-text editor
- Add the HTML declaration on the first line
- Add opening and closing <html> tags
- Save the file in your project folder as “template.html” or something similar
To create the <head>
Between the opening and closing <html> tags, type the opening and closing <head> tags, and then nest the following elements between the tags:
- The <meta> element that sets the character set as UTF-8
- The <link> element that links your webpage to your CSS stylesheet
- The <title> element for the document title that will appear in the browser tab (leave the wording generic in the template, but remember to make it specific to each web page later)
To create the <body>
After the closing <head> tag, add the opening and closing <body> tags, and then nest the following items between the tags:
- The <header> element
- The <nav> element
- An <article class=”content”> or <div class=”content”> (depending on your preferred approach to page content)
- An <aside> element (if you want to include a sidebar)
- The <footer> element
Note that you will likely have a much more complex structure than the above layout. This structure just includes the minimum.
To include a page wrapper
If you want a box that you can use to style the entire page content, create a page wrapper:
- Under the opening <body> tag, type an opening <div> tag with a class of “wrapper”, “container”, “allcontent”, or another name that makes sense to you
- Right before the closing <body> tag, insert the closing <div> tag for the page wrapper
To complete the <header>
Between the opening and closing <header> tags, include some or all of the following information:
- An <h1> element containing an appropriate website name
- A <p> element if you have a tag line or site description
- An <image> element if you have a logo graphic
It’s common to link something in the header to index.html. You can either link the <h1> or, if applicable, the website logo.
To create the <nav>
The navigation menu allows viewers to access the pages on your website, so nest the following items between the opening and closing <nav> tags:
- Add opening and closing <ul> tags
- Add opening and closing <li> tags for each navigational entry in your website
- Inside each <li> element, insert opening and closing <a> tags
- Inside each <a> element, insert an href attribute that links to a page on your website
To provide placeholder text
A good approach in creating a template is to provide some placeholder text in the content area to give you something to style as you’re working on building the stylesheet. Include any elements you might use on your web pages, including the following:
- <h1>
- <h2>
- <p>
- <ul>, <li>
- <a>
Consider adding some Lorem Ipsum text for paragraphs and subheadings.
Additionally, you may have to subdivide content on a page into <section> elements, but only do so if you have legitimate semantic reasons for dividing the content up. For example, don’t use <section> just when changing headings.
To complete the <footer>
Decide what information you want to include between the opening and closing <footer> tags. Common items include the following:
- Contact information
- Copyright information
- Credit and links to background images, if required
- Last updated date
- Links to terms of use, policies, or other legal matters
- Social media icons and links
Simple footers likely just require <p> elements to contain the content; complex footers may need <div> elements.
To style the page
Now that your template is complete, it’s time to build your CSS file and begin creating styles. Use your template as a guide: Doing so may help you remember the elements you need to style.
Make sure your stylesheet is correctly linked to your template. Remember that you can always add styles to your stylesheet as you work with specific website pages.
To create pages from the template
Once you have the template finished and have run it through the validator to ensure everything is working properly, it’s easy to create pages based off the template:
- Save and close your template file
- Open your template file in your plain-text editor again
- On the File menu, click Save As
- Save the file using one of the file names you used back in the navigation menu
- Repeat this process until you have all the files created for your website
Now, since the structure and layout for each page are already established, you can focus on plugging in content.
Want to see an example? View the template I created for the course website.