How can I create templates before creating website for customers

This is the first in a series of blog posts that will explain how to use a free website template to build and publish a complete website. The series will explain what a website template is, how you download a template, how you use code editing software to make changes in the template and add your own content, how you create multiple pages and add a navigation menu, how you make changes to the design and finally how you publish your website on an own domain so that the world can see it.



Introduction

So, you have decided to build a website? Great! You are in for a lot of fun, a journey that will be full of surprises and useful experiences. But you will also come to a lot of intersections where you will need to choose directions, often without knowing what comes ahead. In this series of blog posts I will share some of the experiences I have learned during my years as a professional web designer. Not to provide the perfect guide to building websites as it is virtually impossible to create a tutorial that is suitable for everyone, but rather to explain one of the many paths you can follow and hopefully provide some inspiration on the way. A quite good way I’d say, but definitely the only one.

But let’s start from the beginning…

The first decision to make: The starting point

First of all, there are plenty of ways to build websites. It can be done using a variety of online services (free or commercial), or through different kinds of software (code editors or visual editors), or by hiring a web designer (professional or non-professional) to do it for you, or by using content management systems with different kinds of design themes – or by using website templates. Websites can be hosted on many different hosting services or on an own server, and accessed through a generic service URL or through an own domain name. For a person who wants to build their first website, the many options can be a bit overwhelming. And to make it even more confusing, each option has a wide range of quality levels, both regarding the user experience and the resulting website itself. I will write more about quality and why it matters later.

But if you want a regular website such as a presentation of yourself or your company and you want complete control of both the design and the content, then it can be a good idea to start with a website template. Beside giving you quick results – you can have your first page online within only a few minutes – you will also be able to learn about the code that websites are made of: HTML (also called the markup, the code that makes up the content and the structure of the site) and CSS (the stylesheet, the code that decides how the content is presented). And you can learn about it in small steps. A website template allows you to start with the one thing that is most important, the content of the website. Once you have the content in place, you can dive deeper into the code as you learn more and start playing around with design elements and visual styles.

The focus of this tutorial: website templates

Free website template: andreas01-wide

The templates are free to download and free to use, and they can be modified in any way you may want to. Building a website from one of the templates on this site doesn’t cost you anything, and the templates are built in a way that makes them easy to edit and easy to learn from. Some templates are more advanced than others, allowing you to choose from multiple layouts and color schemes. But in this series I will use one of the less advanced templates to give you a simple start.

This is important since you want your website to work for everyone who visit it no matter how it is accessed. A website that is accessible for everyone and that is built using well-written code that follows modern web standards will also be easier to find using search engines, which is one of the most common ways of finding websites on specific topics and also an important factor if you build a business website and want your company to be found by potential customers. In future posts, I will explain how you make sure to follow the established standards and how you can check for (and fix) errors in any code you add.

OK, let’s move on!

First step: Finding and downloading a template

The target of this tutorial is to build a simple and useful website from a generic template . The first thing to do is to browse through the different templates to find one that looks suitable. On the templates page you can see thumbnails that give you an idea of what the different templates look like. If you click on one of the images or on the title for any template, you will come to a page with more information about that template.

On each single template page there is a download link (for some templates several download links for different versions of the template), information about the size of the download, the date when the template was released and a link to a live demo of the template. There is also a short description of the template and one or several screenshot thumbnails. The thumbnails can be clicked to see the images in larger formats including full size images. There is one screenshot for each layout option that the template includes, and some templates have screenshots showing the alternate versions of the template where the design or layout has been modified.

Second step: Unpack the template

Once you have downloaded the template, open (or unzip) the .zip file and you will find a folder that has the same name as the .zip file, in this example “variant-duo”. Rename the folder to “My website” or anything else you may want to call it, and open it. You will find three files in the folder:

  • index.html – The HTML file. This file includes the actual content (title, headers, texts and code to show content images) and the general structure of the template.
  • variant-duo.css – The CSS file, also called the stylesheet. This is the file that defines how the content in the HTML file is presented when viewed in a web browser.
  • sample1.jpg – The only image used in the template, a wide photo (980×250 pixels) showing flowers that is used as the header image in the template design. It is displayed through a line of code in the HTML file.

With the template unpacked to your computer, you can browse it by opening it in your web browser. When you start working with the template, you will be editing these files and preview all changes through the web browser. It isn’t until at a later stage when the template has been modified into a complete website that it will be published to the web, so when viewing the template in the browser you are only looking at your local files for now.

Third step: Finding software to edit the template

As explained in the first part of this series, there are many ways to build a website – even when you have decided to use a website template as your starting point. For editing a template on your own computer, there are two different kinds of editors that you can use.

The first kind is the visual HTML editor that opens up the template in a similar way as a web browser does but allows you to edit the content. Visual editors are often called WYSIWYG editors (“What You See Is What You Get”), which means that you see the entire template design while the code that forms the design and creates the structure of the content is not shown. Using a visual editor is a simple way to edit a website template, and many visual editors include website templates to give website builders a quick start. One such example is Style Master (a commercial editor available for Windows and Mac, costs $59.99), which includes a number of my templates. Another example is the free NVU editor (freeware available for Windows, Linux and Mac).

The second kind, which is the kind I will use in this tutorial, is the code editor. Unlike a visual editor which displays the design, a code editor shows the HTML and CSS code that websites are made up from. The code is basically only plain text so any text editor can be used to edit it. But specialized code editors include tools that make editing easier, for example by giving different parts of the code different colors to make it easier to see what you are editing. Learning to edit the code directly is not as easy as using a visual editor, but it gives you full control and a greater understanding of how the web works. And by using a website template as a starting point you don’t need to know what all parts of the code does, so you can learn things in small steps. I will be using a freeware code editor called Notepad++ (available for Windows only) in this tutorial, but there are editors with similar functionality for all operating systems such as Smultron for Mac and BlueFish for Linux (both are free).

This is what Notepad++ looks like when index.html and variant-duo.css are opened in the program (click to see a larger version):

There are also editors which allows editing in both WYSIWYG mode and in the code itself. For further reading about editors I recommend Wikipedia’s List of HTML editors and the HTML editor article which also explains why code editors give more control over the result. If you have any questions regarding editors, write them in a comment to this post and I will do my best to answer.

When you have an editor in place, open index.html from the editor to get started!

Index.html – the structure and the content

When the index.html file is opened in a web browser, you see the full template design with the included sample content. But when you open index.html in a code editor, this is what you will see:

In order to understand the structure of the HTML code, we need to take a look at the template design and the different parts of it. Variant Duo is a simple template that can basically be said to have there are basically six main sections:

1. The website title.
2. The slogan or tagline.
3. The navigation menu.
4. The header image.
5. The main content.
6. The footer.

Each of these sections can be found in the HTML code, and each section (with the exception of the header image) can be directly edited by simply editing the corresponding HTML text. But as simple as it may sound, how are the different parts written in HTML? We will take a closer look at that soon, but before that you need to be familiar with what HTML tags are and how they work.

What is a HTML tag?

HTML is a markup language (“HTML” stands for “Hyper Text Markup Language”), and it uses a set of markup tags in order to describe different kinds of content that are referred to as “elements”. A markup tag is a decriptive label written between angled brackets, and each markup tag consists of two parts: a starting tag and an ending tag. The text between the starting and the ending tag is the element that is marked up. Here is an example:

<html> Example of HTML code. </html>

Note that the ending tag includes a “/”. The tag used in the example is the “html” tag, and it is used to define HTML documents so every HTML document should start with <html> and end with </html>.




There are a lot of different tags available, and several different web standards with different sets of tags and different rules for how they can be used. Variant Duo uses a standard called XHTML 1.0 Strict. I will write more about different standards in future posts, but you will only need to learn a few tags to get started with editing your template. For now there are two important things to remember:

  • All tags must be written in lowercase.
  • All tags must be closed by an ending tag.

The basic structure of a HTML file

The basic structure of the index.html document looks like this:

<html>
<head>
(this is the HEAD section, which contains meta tags that describe the document)
</head>
<body>
(this is the BODY section, which contains the actual visible page content)
</body>
</html>

For now, we will ignore the head section of the code and focus on the part of the code that is found below the <body> tag.

1. The website title – the <h1> tag

The title of the template is “Variant Duo”, and the code that outputs it can be found on line number 14 in index.html. The code looks like this:

<h1><a href="index.html">Variant Duo</a></h1>

There are two tags in use in the code above. First of all <h1>, which is a header tag. There are six levels of header tags, h1, h2 and so on up to h6, where h1 is the first level. The use of header tags in HTML documents can be compared to using headers in an ordinary text document or in a book, as headers should be used in a logical structure. If <h1> is compared to the title of the book, then each chapter should have a <h2> header – and sub-sections of each chapter should have <h3> headers.

In Variant Duo, this means that <h1> is used for the site title, <h2> is used for header texts in the page content and <h3> is used for sub-headers.

The second tag is the <a> tag, which is the tag used for creating links to other documents (“a” for “anchor”). A link is created by adding a hyperlink reference attribute (the “href”), followed by the path or URL to the document or page you want to link to. In this case, the link points to the index.html document itself. By letting the site title link to index.html you will always be able to return to the frontpage of your website by clicking the site title.

So, the structure of this part of the template design when viewed in code mode is:

<h1>

(starting tag for the header)

<a href="index.html">

(starting tag for the link to index.html)

Variant Duo

(the text of the linked header, the h1 element)

</a>

(ending tag of the link)

</h1>

(ending tag of the header)

Now, without making any changes to the HTML tags, you can edit the text “Variant Duo” into something of your own, for example “My own website!” and then save the document. When you open index.html in a web browser you will see that the title now shows the text you have entered.

2. The slogan/tagline – <p> for “paragraph”

Right below the line you just edited you can find this code:

<p class="slogan">Dual-column content template</p>

The <p> tag defines a text paragraph, and here it has a class attribute with the value “slogan” added to it. Classes are used to connect specific tags to different styling definitions in the .css file, and in this case I have created a special style called “slogan”. Leave the tag itself as it is (classes and CSS will be covered in future parts of the tutorial), but edit the text “Dual-column content template” into something of your own (for example “A site about my favorite topics…”). Save the file and open it in the web browser again – and your own tagline should be in place.

Summary of changes so far…

By now, line 14 and 15 should look something like this:

<h1><a href="index.html">My own website!</a></h1>
<p class="slogan">A site about my favorite topics...</p>

…and when viewed in the browser you should see this:

Coming up next…

If you have made it this far, then editing the other parts of the template into a complete webpage will be easy! It is simply a matter of becoming familiar with a few more HTML tags. In the upcoming parts of the tutorial, I will explain how to edit the navigation menu, the header image, the main content and the footer. The next step after that will be to learn about using the <head> part of the HTML document to describe your page, and of course how to use CSS to edit the design. I will focus on the header image in the next part, as well as explaining what HTML tag attributes are and how different attributes work.

If you want to read more about the basics of HTML before the next part of the tutorial is posted, then I recommend the excellent HTML Beginner tutorial on HTMLdog.com. If you have any questions or comments regarding this part (or HTML in general), you are very welcome to post a comment below or send me an e-mail.

Now it is time to edit the content of the template and change the header image into an image of your own. And once that is done, split the template into several files to make it a website rather than just a single page – as well as creating the navigation menu for the different pages. Here is a reminder of what the different sections of the page look like:

The numbers represent the following sections:

1. The website title.
2. The slogan or tagline.
3. The navigation menu.
4. The header image.
5. The main content.
6. The footer.

I will skip the navigation menu for now and jump to the header image. But first, a few words about attributes in HTML tags…

Anatomy of an HTML element

Earlier in the tutorial I described what a HTML tag is. In this part we will work more with a specific part called attributes. An HTML element typically has the following parts:

<tag attribute=”value”>content</tag>

Attributes are a set of name-value options, and different tags use different attributes. For the website title we created a link using this code:

<h1><a href="index.html">My own website!</a></h1>

In the code above, the anchor tag has a hyperlink reference attribute (href) with the value “index.html”. The href attribute works only with the <a> tag, so it can not be applied to the <h1> tag directly. Unlike the text content, attributes are not printed out in the design when viewed in the web browser. They are a part of the structure that defines how a HTML document should work. You will be editing several attributes soon, so keep this difference in mind.

Creating a folder for your images

The header image is displayed using the following code in index.html:

<img class="feature" src="sample1.jpg" width="980" height="200" alt="sample image" />

What this code does is to look for a file named “sample1.jpg” in the same directory as index.html is located. You can link to images from other places as well by providing a full URL to an image file as the image source, like this:

<img class="feature" src="http://yourdomain.com/images/sample1.jpg" width="980" height="200" alt="sample image" />

The image source is entered using the src attribute with the path to the image as the value. Using a complete URL path is called “absolute”, meaning that the image source is a defined file on a defined location. Using a reference to a file without providing a full URL is called “relative”, as the link is relative to the HTML page that calls it. In other words, the header image in the template is relative to the HTML file. The good thing about this is that the image link works as intended no matter if your website is located on your computer or published on the web. If you use a visual editor and insert an image, the path to the image file is sometimes entered as an absolute path pointing to the file on your computer, and if the path is not changed when the website is published on the web, the image (or whatever is linked) will only work on your local computer. I usually recommend using relative links if possible, so the path to the header image will not have a full URL in this tutorial.

However, to make your website easier to manage, it may be a good idea to put all images in a separate image folder. To do this, open the template folder and create a new folder inside it. Give it the name “images” and move the sample1.jpg image file into it. This will cause the image link in the template to stop working, so the HTML code needs to be edited with a correct path. Again, relative to index.html. To correct the HTML, simply add “images/” before the file name. It should look like this:

<img class="feature" src="images/sample1.jpg" width="980" height="200" alt="sample image" />

Save the index.html file, and the image will work again in the web browser. Now you have an image folder where future images that you add to your website can be stored.

Adding your own header image to the template

As seen in the HTML code above, the header image has a defined size measured in pixels using two attributes: width and height. The width is 980 pixels and the height is 200 pixels. These values can be changed if you want to use any other size, but the width of the image is adjusted to fit the width of the layout so any change to it requires a change to the layout width in the CSS file. I will explain how to change the layout width in the final part of the tutorial, but for now I will keep the width as it is and only change the height. This means that the image that is added may need to be adjusted in size using an image editor. I want to add a photo collage that I made a few years ago, but the image size of my selected image will not fit so the image needs to be resized and cropped. Here is the original file (click to open it in a new window):

After shrinking the image a bit, I cropped it to an image that measures 980 x 300 pixels. The result looks like this:

This cropped image is saved with the file name “header.jpg” in the “images” folder that was created a moment ago. To place the new image in the proper place in the template, the HTML code needs to be updated so that the path of the image file has the right file name. Also, the height attribute needs to be changed from “200” to “300”.

There is also an attribute called “alt”, which should be included for all images that are displayed in the HTML code. The alt text is an accessibility feature that describes what the image shows, something that is good for several reasons. For example, website visitors with sight disabilities who use screen readers (software that reads content of websites using voice synthesis) to browse your website will be able to know what your header image shows since the screen reader reads out the alt text. The alt text is also used by search engines, so the description you write will make the image searchable.

By default, the alt text in the Variant Duo template says “sample image”. To describe the image I just created, I change the alt text to “Photo collage showing the village of Nautijaur, northern Sweden, in the summer and in the winter”. The changes results in the following code:

<img class="feature" src="images/header.jpg" width="980" height="300" alt="Photo collage showing the village of Nautijaur, northern Sweden, in the summer and in the winter." />

…and when viewed in a web browser the template now looks like this:

You can click the screenshot above to download the template as it looks at this point, with the changes that have been explained so far.

Self-closing HTML tags

As explained in a previous part of the template, all HTML tags must have a starting tag and an ending tag. So why doesn’t the <img> tag have an ending tag like </img>? The reason is that there are a few tags which can use a shortcut.

Tags that do not contain any text content can be closed by ending the tag with />. Those tags are called self-closing tags, and the most common are the <img> tag, the <meta> tag and the tag used to create line breaks in text, the <br /> tag). You can use ordinary ending tags like </img> as well, but I prefer to close the tags directly as it keeps the code shorter.

A few words about class=”feature”

The final part of the header image tag that I have not described yet is the class attribute. The class and id attributes are used to connect a tag to the CSS file, in which the tag can be given different styles. The class attribute in the <img> has the value “feature”, which corresponds to line 28 in the variant-duo.css file. The “feature” class in the CSS (called .feature in variant-duo.css) applies a white line (2 pixels) over the image, and a similar line below it. If you want to remove these two lines, you can simply remove the class=”feature” part from the HTML code.

In a regular website template, id:s and classes have no meaning unless they are styled using CSS. Classes can be used repeated times, while id:s can only be used once in each HTML file.
You may have noticed that there are a number of <div> tags in the HTML code, among other tags that I have not written about yet. The div:s are essentially containers that define a section of the code and allows it to be styled. I normally use <div> tags with id:s to define the layout, while classes are used to style the content. It is also possible to apply styles for the tags themselves without adding a class or an id, but classes and id:s provides additional layers of control of the design. In the Variant Duo template, the “feature” class makes it possible to add styling to the header image rather than giving all images the same style.

I will write more about CSS in another part of the tutorial, this is just a short introduction to the concept…

Moving on…

In the next part, the <head> section of the HTML will be explained and the main content of the template will be edited. In the sixth and final part (which will be published on monday), the index.html file will be turned into three different pages – with one of the pages using a different layout setting than the other two. Then those pages will be linked together by the navigation menu. The design of the website will be adjusted using CSS and I will explain how to publish the site on the web – ending the tutorial with a collection of links to further reading about HTML and CSS.

In the previous parts of the tutorial, three sections of the template were customized. If you have followed the instructions in the previous parts, you should now have a template with your own site title, your own slogan and your own header image. Now it is time to edit the main content. But before doing that, it would be a good idea to take a look at the <head> section of the HTML code. This is what the code looks like in the Variant Duo template:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="Your description goes here" />
    <meta name="keywords" content="your,keywords,goes,here" />
    <meta name="author" content="Your Name" />
    <link rel="stylesheet" type="text/css" href="variant-duo.css" title="Variant Duo" media="screen,projection" />
    <title>Variant Duo v1.0</title>
</head>

The different tags used here are:

<!DOCTYPE> – Defines that this is a HTML document and that it is written using a web standard called XHTML 1.0 Strict. Do not edit this unless you are familiar with W3 standards and doctypes.
<html> – The starting tag for the HTML code, which includes a description of the XML namespace that XHTML uses and the language of the website (in this case, “en” for English). Again, do not edit this – unless your website will use another language than English.
<head> – The starting tag for the head section of the HTML code.
<meta> – Tags that contain structured meta data that describes the document and its content. These tags will be explained in detail below.
<link> – A tag that imports intructions from an external file, in this case the stylesheet (variant-duo.css) that defines the design of the template.
<title> – Used to give the document a title. The content of this tag is usually shown as the browser window and/or browser tab title. It is also shown when the page is bookmarked, and as the main title in search engine pages.

The <meta> tags

In this template, four meta tags are used. The first one defines the content type (text/html) and the character encoding of the document. For most cases, the character encoding UTF-8 will work well, but if your language requires a different character encoding you can edit this line and replace “UTF-8″ with the character encoding you want to use. Read more about character encoding on Wikipedia).

The second and third meta tags define the description and keywords of the website. The description should be short (below 155 characters is recommended) and work as a summary of what the website is about. The description is usually shown on search engine result pages, so it is an important text that should be written with a lot of care. The keywords used to be important for making websites easier to find in search engines, but today most search engines index entire websites so keywords are extracted from the website content rather than just from the meta tag. Still, you should write down the 8-12 most important words that describe the content of your website here, separated by comma signs.

The fourth meta tag defines the name of the author of the document. It can be used to let people who visit your site know that you are the author of the content, but this is not required in any way and does not affect search engines in the way that the other meta tags do.

In order to describe the website that I am building, I have decided to edit three of the meta tags like this:

<meta name="description" content="Andreas' website built for the template-to-website tutorial on andreasviklund.com." />
<meta name="keywords" content="andreas,website,template,tutorial,example" />
<meta name="author" content="Andreas Viklund" />

Note that all meta tags are self-closing tags that end with />. To read more about meta tags and how they can be used, read the Wikipedia article about meta tags.

The <link> tag and the <title> tag

The <link> tag is used to tell the web browser that it should read the content of the linked CSS file, in order to include and apply the design and styles to the HTML when viewed in the browser. It is possible to include several stylesheets and display different stylesheets depending on what kind of display that the website is shown on. For example, mobile devices can show one stylesheet while regular computers can show another stylesheet. In this tutorial, you do not need to make any changes to this line – unless you want to change the file name of the .css file from variant-duo.css into something of your own.

The <title> tag is, as mentioned above, the tag that defines your website title. The default title in the Variant Duo template is “Variant Duo v1.0″, so this needs to be changed. This is how I have edited the title:

<title>My own website!</title>

Since the title (as well as the header tags of the website content) are important factors when search engines index your website, it is a good place to describe the content of your site. For example, if you build a site about your favorite dog breed, then including the name of the breed in the title will likely give your website a better position in the search engine results when someone searches for that specific breed, than it would have if you just write the name of your dog. But don’t fill the title with keywords just because of that, keep it short and simple.

To learn more about writing good descriptions, keywords and titles, make a Google search for any topic that you are interested in and study the meta tags of the top results. For example, if you search for “dogs” you can find this site about dogs which is an excellent example of how meta tags and titles can be written to cover the content topics of the site. Feel free to peek at the code on andreasviklund.com as well, if you are curious. And if you want suggestions or feedback on proper descriptions, keywords and titles for your page, don’t hesitate to contact me for guidance.

Editing the main content of the template

Now, finally, it is time to edit the main content and turn the template into a real website! Here is a reminder of the different areas of the template design:

The main content is area #5 in the screenshot above. It consists of two columns, and the HTML structure looks like this (I have edited the code and removed the sample text from the Variant Duo template to make the code easier to read):

<div id="content">
    <div class="left">
        <h2>Header for the left column</h2>
        <p>First text paragraph in the left column.</p>
        <p>Second text paragraph in the left column.</p>
    </div>
    <div class="right">
        <h2>Header for the right column</h2>
        <p>First text paragraph in the right column.</p>
    </div>
    <hr class="clear" />
    <p class="centered">Centered paragraph below the two columns.</p>
</div>

If you compare the code above with the code you see in the code editor, you will be able to identify each tag. For reference, this is what the template looks like in the browser using the cove above (click to open a full-size screenshot in a new window):

Before you start adding your own content, you need to delete the sample text in the template while keeping the HTML tags. You can do this by deleting the text manually, but an easier way is to delete all code starting from the line that says <div id=”content”> (which should be on line #30) and down to (and including) the closing </div> that you can find on the line just above the <p id=”footer”>, and then copying the code I posted above and insert it into the template where the code you just deleted used to be. When the code has been edited, save the .html file and view it in the browser. The page should now like the screenshot above.

The <div> structure

<div> tags are containers that define sections of the HTML where code is grouped together. The div:s can use id and class attributes that makes it possible to use the div:s to arrange the layout of the page, and div:s can also be nested by putting one or several div:s inside another div. Any content inside one div can be affected by CSS that is applied to that div if wanted.

In Variant Duo, there are a number of div:s used to create the layout. The first level is at the beginning of the content, just below the <body> tag, and it is the <div id=”wrap”>. The purpose of it is to define the width of the entire design, and it is done in the variant-duo.css file where the corresponding ID is called #wrap. Since all areas of the design should stay within the width I want to use, all content of the template needs to be inside this div. This is done by putting the ending tag for this div at the end of the HTML, just before </body>. The ability to use nested div:s means that I can put other div:s inside this first level, but it is important to notice that nested div:s must be closed before the previous div is closed.

As seen in the code, the main content area is defined by a div which has the attribute id=”content” (which is styled by #content in the CSS). After the opening tag for div=”content”, there is a new opening tag for a div which use the class=”left”. After the opening tag of div class=”left” comes the actual content of the left column – which is followed by a closing </div> that closes div class=”left”. The next line opens a div that uses class=”right”, and it includes the content in the rigt column before div class=”right” is closed by another </div> closing tag.

Below the two columns there is a <hr (> tag (horizontal ruler, self-closing) which is not visible in the design but which has a CSS style that tells the browser that anything below it will not be affected by the two columns. Anything below the clearing <hr /> will use the full width of the main content area. And finally there is a text paragraph which uses class=”centered” that makes the text in the paragraph centered (through the line starting with .centered in the CSS). At this point the main content div is still open, so there is a final </div> that closes the main content area.

Insert your content!

By now, editing the main content should be easy. In the left column you have a header and two paragraphs that you can use if wanted. You can add more headers (including <h3> sub-headers) and more paragraphs as needed, and you can insert images by using the <img> tag, like this:

<img src="images/my-content-image.jpg" alt="My content image" />

Just make sure that images are not wider than the width of each column (461 pixels), as inserting bigger images than that will break the layout. The Variant Duo does not include any styles for aligning or positioning images, but it can be added by creating a few CSS classes if you need it. Once you have the left column content ready, proceed to the right column and add the content you want to use there. Remember to close all tags properly, including the paragraphs. If you want to make a single line-break, you can use the <br /> tag. Headers and paragraph elements can not be nested in the way div:s can. Each header and each paragraph must stand by itself.

Create more pages

To create more pages for your site, simply copy index.html into a new file, for example about.html, and edit the main content section for it. Create as many pages as you need. I will use three pages in the example in the next part of the tutorial where the navigation menu will be created, but you can of course use more pages if you want to.

The alternate layout – one column only

And finally, there is a bonus feature in the Variant Duo template that may be useful for you. You do not need to use the left and right column div:s. You can just as well remove them and write your content directly into the div with id=”content”. If you do so, your content will fill the entire width of the main content area in a single column.

This is the last part of this tutorial, so now it is time to wrap up the project and get the website ready for the web. If you have read and followed the instructions in the previous parts, you should now have an index.html file where only two things from the original sample content in the  template remains: The navigation menu and the footer. In the end of part 5, I suggested that you make copies of index.html and rename them into something else, for example about.html. After creating about.html, you could edit the main content of that file to create a second page for your website. This process can be repeated to create as many pages as you want your site to have. There is no limit to the number of pages you can have. However, the visual design of the navigation menu in the Variant Duo template limits the number of pages you can place in the main menu so if you want to have more than 7-8 pages you may need to modify the menu design or place some links inside the main content rather than in the navigation menu.

For this final part I will keep it simple and use only three pages. I have created two copies of index.html and renamed them into about.html and links.html. I have also edited their main content, so the current file structure of the template/website folder looks like this (click the screenshot to download the template with my modifications up until this point):

Currently, the index.html file in my modified template looks like this when viewed in the browser:

How to create links to other pages or websites

The texts in the content that have a different color than the main text are links. I mentioned the <a> tag in an earlier part (“a” for “anchor”) where the <h1> element included a link to the index.html file, and I have also written about absolute and relative links. But I have not written anything about linking to other pages on your site or to other websites so here is a quick explainer:

A link is created using the <a> tag with a href attribute. The value of the href attribute is the location of the page or website that you want to link to. The content of the anchor element (which can be either text or an image) will be the actual link when viewed in the web browser. For links to pages within your own website you can (and most often, should) use relative links, like this:

<a href="about.html">About me</a>

For links to other websites you need to provide an absolute URL path, like this:

<a href="http://bynext/templates/">Andreas' free website templates</a>

To create an image link, you place the <img> tag as the content between the opening <a> tag and the closing </a>, like this:

<a href="puppies.html"><img src="images/puppies.jpg" alt="Go to my page about puppies" /></a>

The structure of the navigation menu

When you know how to create links to other pages, it suddenly becomes very easy to create the navigation menu for your website. In the Variant Duo, the code for the sample navigation menu looks like this:

<div id="menu">
    <p class="menulinks">
    <strong class="hide">Main menu:</strong>
    <a class="menulink active" href="index.html">Home</a><span class="hide"> | </span>
    <a class="menulink" href="index.html">Page 2</a><span class="hide"> | </span>
    <a class="menulink" href="index.html">Page 3</a><span class="hide"> | </span>
    <a class="menulink" href="index.html">Page 4</a><span class="hide"> | </span>
    <a class="menulink" href="index.html">Page 5</a>
    </p>
</div>

Most tags used in this code should be familiar to you at this point. There is a div that gives the code section the id=”menu”, which is used in the CSS (as #menu) to position the menu in the layout. Then there is an ordinary paragraph with the class attribute “menulinks” which contains the links. The class makes the paragraph right-aligned. Each link includes the class=”menulink” and one of the links also has a second class named “active”. More about that soon.

The two new tags which I have not mentioned in previous parts of the tutorial are the <strong> tag (which makes text bold) and the <span> tag (which defines a text span that can be given a class attribute for adjusting the visual presentation using CSS. Both those two tags are used with a class named “hide”, which responds to the line starting with “.hide” in the CSS file. The class=”hide” is used to tell the web browser that the element should not be visible in the design, so the text “Main menu:” can not be seen anywhere when you view the page in a regular web browser. It is, however, visible in web browsers that do not support (or do not use) CSS, so a website visitor who uses a screen reader will be able to hear that the links represent the main menu of the site. The pipe character (“|”) creates a visual separation between the links in browsers that do not support CSS – a feature that is not really needed but which makes the menu look better in text-based browsers.

Creating the navigation menu for your website

Now that I have my three .html pages ready, I want to create a menu for those three pages. To do this, I edit the code above so that there are only three links, each with a href attribute that responds to a .html file in the website folder – and a link text for each menu option. Since I have three .html documents, this needs to be done in all three files, but I will start with index.html since it will be the first link in the navigation menu. I have decided to use “Welcome!” as the link text for the frontpage (index.html), “About me” as the link text for the second menu option (about.html) and “Links” as the text for the third menu option (links.html).

The new code will look like this:

<div id="menu">
    <p class="menulinks">
    <strong class="hide">Main menu:</strong>
    <a class="menulink active" href="index.html">Welcome!</a><span class="hide"> | </span>
    <a class="menulink" href="about.html">About me</a><span class="hide"> | </span>
    <a class="menulink" href="links.html">Links</a>
    </p>
</div>

When the updated code is saved, the navigation menu of index.html is done! Copy the edited code and open about.html in the code editor and replace the sample menu code with the updated code, and then do the same for links.html. Then open index.html in the web browser to see what it looks like. You should now be able to use the navigation menu to navigate between the three different pages. But there is one more thing to do…

On all three pages, the “Welcome!” menu link is highlighted. But we want the “About me” option to be highlighted when about.html is viewed, and the “Links” option to be highlighted when links.html is viewed – so a small change needs to be done to the anchor element classes. In about.html, the class “active” needs to be moved from the first link to the second. And in links.html, the same class needs to be moved to the third link. The final menu code for about.html should look like this:

<div id="menu">
    <p class="menulinks">
    <strong class="hide">Main menu:</strong>
    <a class="menulink" href="index.html">Welcome!</a><span class="hide"> | </span>
    <a class="menulink active" href="about.html">About me</a><span class="hide"> | </span>
    <a class="menulink" href="links.html">Links</a>
    </p>
</div>

…and in links.html it should look like this:

<div id="menu">
    <p class="menulinks">
    <strong class="hide">Main menu:</strong>
    <a class="menulink" href="index.html">Welcome!</a><span class="hide"> | </span>
    <a class="menulink" href="about.html">About me</a><span class="hide"> | </span>
    <a class="menulink active" href="links.html">Links</a>
    </p>
</div>

Save about.html and links.html once these changes are made, and open index.html in the web browser again – and the highlighting of the page that you currently view should now work. This feature is created by using two classes at once for the currently active menu link: The first class (.menulink in the CSS file) which defines what the menu link looks like, and a second class (.active in the CSS) that defines how the highlighted menu link looks like.

The footer of the website

With the navigation menu in place, the website template has now been expanded into a complete website. There is only one area of the design left to edit and that is the footer of the site. The code for it currently looks like this:

<p class="footer">Copyright &copy; 2010 <a href="index.html">Your Name</a><br />
Template design by <a href="http://bynext.com/">Akash</a></p>

This is another paragraph, this time with a class named “footer” that is used in the CSS to define the position and style of the text. Change “Your Name” into either your own name, the name of your company or the title of the site. The text “Template design by Akash” with the link to this website can be removed if you want to, but I kindly ask you to leave it since it helps others find my templates. Keeping the link is also a great way of saying “thanks!” and giving me credit for my work.

Once again, the footer of all pages on your site needs to be edited so you need to repeat this step for each .html file. But unlike the navigation menu, you can simply copy and paste the same code on all pages. With the footer in place, you have built your first website using a free website template and the site is now ready to be published on the web!

To see what my template-based website looks like in its final form, click the screenshot below:




www.bynext.com

Leave a Reply

Your email address will not be published. Required fields are marked *