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.
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:
John Smith - About Me
Now change the text inside the
tags to say whatever you want.
<h3>Change the Image</h3>
<p>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:</p>
<pre class="language-html"><amp-img src="muo-logo.jpg" class="about amp-wp-unknown-size amp-wp-enforced-sizes" width="1170" height="400" sizes="(min-width: 1170px) 1170px, 100vw"></amp-img></pre>
<p>Now change “muo-logo.jpg” to the URL for your image.</p>
<h3>Change the Text</h3>
<p>Now you just have to add the text that you want for the page. To do this, find the paragraph tags. These are </p>
<p> at the start and </p>
<p> at the end.</p>
<p>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.</p>
<p>You can also change the heading at the top of the text. To change this, find the line:</p>
<pre class="language-html"><h1>About me</h1></pre>
<p>And change the “About me” text to whatever you want.</p>
<h2>2. <a href="//static.makeuseof.com/wp-content/uploads/2019/05/social-media-template.html">Where To Find Me Template</a></h2>
<p><amp-img class="aligncenter lazy-load amp-wp-enforced-sizes" src="https://static.makeuseof.com/wp-content/uploads/2019/05/website-templates-wheretofindme.jpg" alt="Website Templates - Where to Find Me" width="670" height="435" sizes="(min-width: 670px) 670px, 100vw"></amp-img></p>
<p>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.</p>
<h3>Change the Social Media Links</h3>
<p>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:</p>
<pre class="language-html"><amp-img src="twitter-logo.svg" class="socmed amp-wp-unknown-size amp-wp-enforced-sizes" width="1170" height="400" sizes="(min-width: 1170px) 1170px, 100vw"></amp-img>
<br/><br/>
<b>Twitter:</b> <a href="http://twitter.com/johnsmith" target="_blank" rel="noopener noreferrer">@JohnSmith</a></pre>
<p>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.</p>
<p>Now do the same with the other social media sites.</p>
<p>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:</p>
<pre class="language-html"><amp-img src="tumblr-logo.png" class="socmed amp-wp-unknown-size amp-wp-enforced-sizes" width="1170" height="400" sizes="(min-width: 1170px) 1170px, 100vw"></amp-img>
<br/><br/>
<b>Tumblr:</b> <a href="https://johnsmith.tumblr.com" target="_blank" rel="noopener noreferrer">johnsmith</a>
<div class="amp-wp-inline-138d714e6265bd8f1acd98fc68074908">
<br/><br/>
</div></pre>
<h3>Change the Heading and Title</h3>
<p>Like the about me template, you can change the heading and title by changing the text inside the </p>
<h1></h1>
<p> tags and the </p><title> tags.
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: