Tutorial: Building your first website using a free website template (part 6)
This is part 6 in a series of blog posts that explains how to use a free website template to build and publish a complete website. Read part 1 for an introduction to the tutorial, part 2 that describes how to download and unpack a template and finding an editor for your operating system, part 3 that explains how to get started with editing index.html, part 4 that explains the anatomy of the HTML element, attributes and how to replace and resize the header image and part 5 that explains the <head> section of the HTML, meta tags and how to edit the main content.
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 Variant Duo 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="https://andreasviklund.com/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 © 2010 <a href="index.html">Your Name</a><br /> Template design by <a href="https://andreasviklund.com/">Andreas Viklund</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 Andreas Viklund” 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:
You can also see the website live on https://andreasviklund.com/files/tutorial/.
Finding a web host for your site and publishing the site on the web
Finding a good domain name and a web host that fits your needs is something I will write more about in a future post. I will also explain how to upload a template-based website to your web host, as well as writing more about topics like web standards and search engine optimization that I have mentioned in this tutorial.
If you don’t want to wait for that post, I can recommend the hosting company where andreasviklund.com is hosted: Svenska Domäner. They offer a great and reliable service with top-quality support, and if you need help with anything related to publishing a website based on one of my templates on Svenska Domäner I would be happy to help you out.
Moving on to the next step…
In this tutorial I have only touched the surface regarding CSS and how the HTML code is connected to the CSS using classes and id:s. My original idea was to include a couple of posts specifically about the variant-duo.css file as well as using the Learn CSS template to explain how to create and modify layouts, but I realized that it would be better to let this first tutorial focus on the basics of HTML and providing a simple way into the world of web design. A significant part of the feedback I have got from those who have followed the tutorial from the start have agreed with that. Learning CSS will be the topic of future posts and tutorials, both on a beginner level and for more experienced site builders.
So if you have found this tutorial useful I recommend you to subscribe to the andreasviklund.com RSS feed, follow @andreasviklund.com on Twitter or join the andreasviklund.com page on Facebook. If you have used this tutorial to build an own site based on the Variant Duo template and you have already published it on the web, feel free to post the link in a comment to this post.
Thanks for for reading, see you soon again!
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.
48 comments:
Excellent revision for html and a good intro to CSS. I will use your templates to give my site a more professional look, cheers.
Andreas thanks very much for all your effort that went into the tutorials, they are very clear and easy to follow i hope you will have time to do more in the future for us all.
they are very clear and easy to follow i hope you will have time to do more in the future for us all.
wow, this instruction is easy to follow, and i become enlighted. Thank you for posting about the basic of website template changing. thanks alot…!
Useful article. But I don’t consider what to use public templates it is correct. Uniqueness in all – the keystone to success.
Hello,
I have been following this series using the “learn CSS template” to build my first site and so far everything has gone very well. Thank you for the info, I am having one issue where I am trying to use the q1-q4 areas as links to my social media with icon images for twitter etc. and everything is fine untill I try to make it so that when you click the image it takes you to whatever site it maybe. When I add the link into the code there is a border that is put around the image that I dont want there. I have tried to find what I would need to change to remove this border, but have not been able to figure it out. any insight would be greatly appreciated.
Hi Cheyne,
Maybe you already know by now, this border is due to the ‘padding’ feature within the CSS file that is responsible for the layout of the site.
Look for the img part, there would be a line having padding of perhaps 5px, you can change or remove the value of the padding or even the entire line:
img.border {background:#f4f4f4; border:1px solid #ddd; padding:5px;}
All I have learned about HTML, I got from playing around with Andreas’ templates for quite a few years by now.
Cheers
Lars
Very clear instruction to follow.
Thank you very much.
Thank you for this tutorial it is helping me to design my website!
Hi. When I followed the suggestion to
“…click the screenshot to download the template with my modifications up until this point”
I got an Error 404 instead of the zip at URL http://andreasviklund.com/files/tutorial/template-tutorial-after-part5.zip
that the link behind the image points to.
Anyone else get that problem?
Hi,
I have used your template Variant Duo and wonder if I can easily switch between your other templates without massive changes. I would like to compare how my stuff looks like in your other templates.
I think your tutorials are very educational and hope there will be many more!
Tack så mycket, den bästa steg för steg “tutorial” , man faller inte alltid igen i Kunskapsluckor, och kan verkligen avsluta en handledning med praktiska resultat. Som nästan 70 år Gubben
hade jag mycket roligt med denna lektionen.
Återigen, tack! från Tyskland
Reinhart
Thank you very much, the best step by step ‘tutorial’, you do not fall in “knowledge gaps”, and can really finish a tutorial with practical results. As almost 70 years old man
I had a lot of fun with this lesson.
Again, thank you! from Germany
Reinhart
I’m really new to the subject of webpage design yet I found this tutorial exceptionally easy to follow *and* understand too. It has demystified style sheets and html tags for me and given me the confidence and knowledge to do so much more – Thankyou Andreas!
Oh and by the way, your designs are exceptionally well designed and easy to implement. Thanks again :)
This is exactly why I like the internet, helping each other out.
It has helped me a lot to start understanding webdesign, many thanks. The site I created following this tutorial is for my brothers company . It will be online as soon as he approves…which hopefully he will
I am working with your Andreas08 template (original version) and I am trying to get the navigation menu to create a drop down with additional menu items. I know that this requires use of another unordered list within the original list and the property “hover” but I cannot quite figure it out. If you have existing code to achieve this or a tutorial, it would be very much appreciated. Thank you!!
OMG – I almost lost my mind with the editors provided by my hosting service as well as Expressions Web – your instructions are easy to follow – I feel like I have learned more in the hour I spent on here than I have with the two futile days with Microsoft!
Thanks for all of your hard work!
Hello, first of all awesome work :D
Got a bug I think you should fix or remove. On this site where the ” (click the screenshot to download the template with my modifications up until this point):” is you can choose 5 files .. but your <a href link is bugged.. ( dont know if you did it with ..) um says Error 404: Page not found
Thanks for your kind comment and for finding the broken link (which has been corrected now)!
I have used your templates to great success, now I have so many pages I would like to create them so that the navigation bar is mirrored on several pages so that if I update it, it gets updated on all the pages. Any advice on how to do this?
I would like to know that as well. I hope it can be sone in the CSS page but have not figured it out yet. I am just in the process of redoing two of my websites using the templates. So far so good. Another thing I am not sure of is the difference between a side menu and top menu. I am using Variant Trio. There seems to be no point to duplicating the menu as then its just cluttered. For now, I have just left Home and Contact at the top menu and am using the side menu for site navigation. Hope to have both sites up soon.
This is a question I get often, and something I should write about as a seventh part of the tutorial. There are multiple ways to handle this dilemma, for example converting the HTML files to PHP and creating a separate menu.php which includes the menu code – with the file then being included into each page using an include function.
Here is an article from W3Schools explaining how PHP includes work: PHP include() and require()
Hi,
I took one of your template for my new website today because it is fit to my ideas very much, but I am not familiar with HTTP language. There is a problem (for me) with navbar. It shows all pages in a row but I need pages from my custom menu. How can I do it?
Thank you in advance.
Eres grande muchacho, ¡muy grande!, me gustó tu explicación, me será útil, gracias.
Hi,
Fantastic tutorial and easy to follow.
When I try to upload completed website I dont get any boxes, background colour and link boxes and other stuff except my own image. It all comes out to the left side of the page.
What am I doing wrong
Dave
OK. I have now sorted out my upload problem.
Cant wait to get my site updated with one of your templates.
This is a great tutorial.
You are a superb tutor.
You are walked me through the process very smoothly without generating any apprehensions or anxiety.
Every aspect has been beautifully and thoroughly explained with expansions and examples.
Anyone who wishes to lay his/her hands on web designing should read this tutorial.
Reading your tutorial one will gain confidence.
It is the era of Responsive/Progressive/Adaptive web designing and it will be a great help if one walked through this tutorial to walk confidently in the world of web designing.
Thanks for this tutorial.
I am going to bookmark it for re-reading and also to let my friends and others read it.
You deserve much praise for this website Andreas!
I’m going to be honest, if I had put so much time & work into helping people get up and running by literally holding their hand from A to Z, I would charge some serious $ for it, and it would be fair for the quality content on this site.
This is as good as any Web Design guidance you can purchase on various websites, in fact it’s the best I’ve come by, and it’s free!
I almost feel bad that I’m probably going to earn money in a couple of years on something that I learned absolutely for free at this site. Of course I learn Web Design from other sources as well, some bought, some free, but as I said this is the best!
I would gladly pay you for the help you provide at this site, perhaps you should make an ‘Advanced Web Design’ section only accessible for donors or something? That’s what I would’ve done anyway :)
Kind regards,
David
I’ve tried to create a site on joomla, and find a template with your’s advise. Thx a lot!
Andreas, You are a blessing for those of us just getting a start in web development. I have been able to use a template before, but your excellent explanation has helped me make the process so much easier. Please don’t ever stop doing what you do. Thank you!
I completed the basics of my website today using your lessons. I even had the courage to search for a different template and managed to produce a quality package. I plan on letting it sit for a week before revisiting it, so that I have a fresh look at it. At that time, I will add images I purchased for commercial use and get it up and running. Thank you for making the process logical and simple.
Hi,
Thanks for your blog and your works, it’s a great help to help me to create my first portal, you can see my work at http://www.zinfo-web.com, it’s one of the first french result on internet portal keywords.
Thanks a lot !
David (france)
Thank you very much for this! I used this tutorial to make my first website and it went great, stress-free! Good instructions, easy to follow. Thanks again! =)
Hello, I downloaded the signature business card template (this is me dark) and followed this tutorial and am having a very hard time changing font styles/sizes for particular sections. I read a few articles online but still cannot figure it out. Any help would be appreciated. Thanks.
Thanks very much – a useful refresher on HTML and good introduction to CSS. I love your design ethos too.
Hello,
Thanks for your works, It helps me to create many websites. Such as: http://www.grupa.edu.pl
Thanks a lot!
JJ
I will use your code to create a new navigation menu for my site. I hope that it is ok for you!
Great post..Thanks very much..
Hi Andreas,
i just want to say thank you for this great tutorial and thank you for your work!
Greets,
Adam
Many thanks for this great tutorial series. It helped me a lot.
Thank you & Greets,
AJ
Hi Adreas,
thanks a lot for this great topic. I am creating my first website (www.ptgs.cz) for my father’s project, it is based on adnreas02 template, and it made it much easier for me to start! So many thanks again.
also I would like to ask if anyone could give me an advice how to make the website multilingual? The project mentioned above should be in “ru”, “cs” and “en” laguages, with switching buttons.
thanks in advance
ar
Thank you brother :)
Your style is really unique compared to other people I have read stuff from. Thank you for posting when you’ve got the opportunity, Guess I will just bookmark this blog.
Greetings, I do think your site could possibly be having internet browser compatibility problems. Whenever I take a look at your web site in Safari, it looks fine however when opening in Internet Explorer, it has some overlapping issues. I just wanted to provide you with a quick heads up! Besides that, great site!
Thank you Andreas for putting together the tutorials, and for having so many free templates at hand. Much appreciated.
You will be pleased to know that I found your website because someone posted your design credits in the footer on the website that they put together. I followed the link and here I am :)
I know that you have been working on redesigning this site with the login.. I have noticed that there are some previews that are reading dt instead of demo in the url, and then the download comes up as error.
Enjoy the season and the new year ahead :) Happy New Year from Canada!!
Excellent information for those of us who want to build our own websites using html knowledge. I have learned so much from this article. Great Job!!
Thank you very much for these tutorials! They’ve helped me a lot – Really great for total beginners! :)
Congratulations ¡¡¡ You are a very good teacher¡ Information is clear and concise even for people like me knowing nothing about building website. I will try with your example. Thank you very much.
Greeeeeeeeeeeeeeeat Tutorial.
With in half an hour I have made my site. I wish I could do some thing more like adding two more columns , I want to have four columns and also if possible change of photos on the Home page.
please suggest any other place or your blog to learn that.
You are truly GREAT.
THANKS MAN.
Bob