Choose article from series:
1. Ways to create a Website
2. How to prepare free or commercial HTML Web-Templates
3. How to edit and customize HTML Web-Templates

How to prepare free or commercial HTML Web-Templates20 June 2015

There are few ways to get your Web-Design. You can download a free Web-Template from one of thousands authors on the web, or you can buy a commercial template from online markets, or you can request a custom unique web-design from author (this is the most popular way for bands, artists, developers). No matter which way you will decide to go - you will be working with your ready template the same way.

How to keep and edit a Website offline?

Everything you will be doing with your website will be offline. You will upload finished files only after the content will be added and all changes will be applied.

So, create a separate folder for your Website anywhere on your hard drive. For example i keep all my website copies in 'D:\Sites' folder, so it's very easy to reach anytime. We will name this folder 'My Test Site' (but it can be named as you wish). Everything inside of this folder is stored in the ROOT directory of your website. Don't burry your HTML files in sub-folders, at least keep the main pages in the root directory. Keep it clean - store all the gallery pictures in 'gallery' folder, audio files in your 'audio' folder and so on. There's nothing worse than a messy website.

By default your main page will be 'index.html' or 'index.htm'. This is where your visitors will get after typing your address in browser. You may change it on server, in your account settings, but i'd recommend to keep it by default.

Download a Simple HTML+CSS template for this and next article to learn the basics.

What you need to edit and customize an HTML web-template

From Notepad to pretty much expensive app, depends on you. I'll explain two apps which i use for many years, and the pros and cons of those apps. You may use any of them, or both.

Notepad++
Freeware notepad with code highlight. You need code highlight to separate the content from markup visually. It makes work with HTML files very easy and fast. Tags are highlighted with color, the content text is black, so you automatically skip the markup when you look through the file. It helps you to concentrate either on markup or on the content, depends on what you're going to edit. It doesn't have any other features to enhance your work with website, unlike the next software.

Adobe Dreamweaver
That one is shareware, but it's worth every dollar you spend for it, especially if you manage multiple websites or work with your site on daily basis. It has a markup highlight as well, which you can also customize. But the main thing is that you can set coder\designer view and see the markup and the design side by side, and it will be updated in real time. As well you can select any part of the content, or menu, or sidebar in preview window and it will get automatically selected in code view, so you won't have to scroll and look through your document everytime.

But for god's sake close all the default panels opened on the left, except for browser view. You will never ever need it, but it slows down your work alot.

Template - another very useful feature. You may select few parts of the markup and save them as template. Skip the content, meta and title (we'll talk about those elements later) and save everything as template. It becoms gray in code view, which means you cannot edit these areas anymore in this file. You can modify it only by editing the template file. Why? To manage all of your pages at once. If you will need to add a new menu item, you'll just add it in your template and Dreaweaver will apply this change to all files managed by this template. Very usefull when you're about to change the whole design, or change menu.

Library - kind of light version of Template feature. You can select and save separate pieces of code as Library item, and each time you update this item, all files where this piece of code has been used will be updated as well. I'd prefer this way to templates.

Snippets - this feature lets you to save some pieces of code as snippets, and then just drag them back inside of your document whenever you need this code again. For example if you have a gallery box code, you can save the snippet and insert it on any other page of your site when you'll need it, without opening and copying the code from the original file.

Dreamweaver provides lots and lots of features, including FTP uploading of the updated files. I've just described the most useful for me.

Actually you may want to edit your website on your Android Tablet, so take a look at Turbo Editor. It has similar features to Notepad++.

What is META Tag and how to edit it?

Meta Tags are used by search engines to index your website. If your web-site will be well indexed you'll get more visitors, because your site will be displayed in their search results closer to the top. Meta tags are written in HTML files.

Let's take a look at the most important tags that must be customized in any web-template for each page of your Website:

Sample of Meta Tags for HTML page

<title> Title of this page. Keep it short but descriptive. 64 to 68 symbols including spaces would be the best</title>
- You may want to add the title of the whole website before or after the page title. Just write it like "My Website | Page title goes here". Line 5 on screenshot.

<meta name="robots" content= "index,follow">
This tag tells the search engine that your page is allowed to be indexed. Line 6 on screenshot.

<meta name="Description" content="Describe your page. Don't describe the whole website. Just this particular page. ">
This is the line that Google shows below the title in search results. Keep it 130-140 symbols. Line 7 on screenshot.

<meta name="Keywords" content="photography, art, stock, free, download" >
- enter your keywords here, separated by commas. Try to keep it within 20 keywords, otherwise search engines might ignore it at all. Line 8 on screenshot.

ADVICE: Be honest with search engine, don't try to cheat. Cheating might give you a short bonus but you definitelly will be dropped down or blocked at all. If you use valid keywords and quality content you will get visitors who really interested in your job, services or art, instead or just random bored teenagers who click anything can be clicked and not interested in your service.

How to view pages of your site offline?

You may use any browser to preview your pages before you will upload them on server. It will look exactly the same as if it was online. The only exception would be facebook javascripts if you will be using it (it doesnt load for offline pages). Just drag the html file and drop it on browser's empty window. Or open it with 'File > Open File' command (usually CTRL+O shortcut). You can preview your pages on Android devices as well (i prefer Mozilla Firefox, as it can open local files easily).