Whether you run your own business or you simply want to advertise yourself and your skills, it's important to have a website. But maybe you don't have the time to learn HTML and don't want to spend money on expensive web design services.
In that case, you can use our free HTML templates. We've created simple templates which you can adapt to your own needs to create a simple website. We've also included instructions so you can use the templates even if you're a total beginner with HTML.
How to Use the Templates
You can preview each template by clicking the link in the title. But to edit and use the templates yourself, you first need to download them. To do this, right click on the title of each template and choose Save Link As.... Then select a folder to save the template and hit Save.
An alternative method is to open up the template in your browser by clicking on the link. Then right click anywhere on the page and select View Page Source. This will show you the HTML used for the page. You can then hit Ctrl + S to save the template to your computer.
Now go to the folder where you saved the template. Right click on the template and choose Open with then select Notepad. This opens up the template as a text document. Here you can make any changes to the template you want, then save.
When your edits are made, your pages are ready to host. Check out our guide to the best free website hosting services to find a suitable host and your site can be online in no time.
1. About Me Template
This template is for a simple homepage, which could be for your personal or professional website. You can add a portrait image and text about yourself and your professional achievements.
You could also use this template for any other kind of text-based content, such as information about a hobby or topic that you want to share.
To customize the template, first open up the HTML file in a text editor like Notepad or WordPad. To understand what you're seeing, you can learn about understanding basic HTML code.
Change the Page Title
The first thing to change is the title. This is the text that appears at the top of the tab when you open the page. To change this, find the section:
<title>John Smith - About Me</title>
Now change the text inside the <title> tags to say whatever you want.
Change the Image
The template comes with the MakeUseOf logo as an example. You can change this image to whatever you want. A square image looks best, but you can also use a rectangular image if you prefer. To change the image, find this line:
<img src="muo-logo.jpg" class="about">
Now change "muo-logo.jpg" to the URL for your image.
Change the Text
Now you just have to add the text that you want for the page. To do this, find the paragraph tags. These are <p> at the start and </p> at the end.
Copy and paste the text you want in between these paragraph tags. There will be a space automatically added at the end of each paragraph. To add more paragraphs, just add another set of <p></p> tags with text inside.
You can also change the heading at the top of the text. To change this, find the line:
<h1>About me</h1>
And change the "About me" text to whatever you want.
2. Where To Find Me Template
This template is an easy way to link all of your social media sites. You can use this as a landing page which points to all the other sites where you can be found online.
Change the Social Media Links
You need to change the links and name for each social media account. To do this, start off with the Twitter account. Find this line:
<img src="twitter-logo.svg" class="socmed">
<br><br>
<b>Twitter:</b> <a href="http://twitter.com/johnsmith" target="_blank">@JohnSmith</a>
There are two things to change here. Firstly, change the link http://twitter.com/johnsmith to the link for your Twitter account. Secondly, change the handle @JohnSmith to your handle.
Now do the same with the other social media sites.
If there is a site you don't use, for example if you don't have a Tumblr account, then just delete this section of the template:
<img src="tumblr-logo.png" class="socmed">
<br><br>
<b>Tumblr:</b> <a href="https://johnsmith.tumblr.com" target="_blank">johnsmith</a>
<div style="clear:both">
<br><br>
</div>
Change the Heading and Title
Like the about me template, you can change the heading and title by changing the text inside the <h1></h1> tags and the <title></title> tags.
3. Contact Me Template
This page is a way for people to contact you without them having to email you. The form takes the information entered into it and automatically sends it to your email address. It's an easy way for site visitors to get in touch with you.
Change Your Email Address
To make the form work, you need to change one line in the template:
<form action="mailto:youraddress@gmail.com" method="post" enctype="text/plain">
Here you change youraddress@gmail.com to your email address. This will work with any email provider and you'll receive an email with whatever comments were entered into the form by site visitors.
Change the Text, Heading, and Title
Once again you can change the text that appears on this page as well. To change the text, just edit what appears between then <p></p> tags. To change the heading, change the text between the <h1></h1> tags. To change the title, change the text between the <title></title> tags.
4. Business Homepage Template
When creating a home page for your business, you want to have all the key information in one place. That's what this template is for.
Change the Section Titles
To change the title of each section, look for these lines:
<h1>About Us</h1>
<h1>Our Mission</h1>
<h1>Our Services</h1>
<h1>Our Customers</h1>
Now change these sections title to whatever you want by editing the text between the <h1> and </h1> tags.
Change the Section Content
To change the text that appears beneath each title, look for a paragraph that begins as follows:
<p>Lorem ipsum dolor sit amet... </p>
Now change the text inside the <p> and </p> tags to say whatever you want.
Change the Image
The template includes a space for an image at the bottom of the page. To change the image, find this line:
<center>
<img src="muo-logo.jpg" width="200">
</center>
Now change the URL "muo-logo.jpg" to the URL for the image you want to use.
5. Business Review Page Template
When you run a business, it's important to make customer testimonials available. This shows potential new customers that other people have used your business and had a good experience.
This template will let you show off your best customer reviews.
Adding Customer Information
To add reviews to this page, first you need to add the customer information. To do this, look for this section for the first review you want to add:
<b>Customer Name:</b> John Smith
<br>
<br>
<b>Customer Business:</b> Smith's Supplies
Now simply change "John Smith" to the customer's name and change "Smith's Supplies" to the customer's business name.
Adding Customer Reviews
To add the review itself, look beneath the customer information and find this paragraph that begins as follows:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Now delete this text and replace it with the customer review.
Add More Reviews
To add more reviews than the three on the template, copy the whole block beginning with <p> and ending with </p>. Paste this below the current reviews and edit to add more reviews.
Create a Website Quickly With HTML Templates
These templates will allow you to quickly and easily create a personal or professional webpage. You can edit each template to fit your needs, or use several and link them together to create a complete site.
If you want to take your website to the next level, you can learn how to create your own website from scratch. Find out how to make a website for beginners to learn more.