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 edit and customize HTML Web-Templates21 June 2015

In this article i'll explain how to add a custom content like headings, paragraphs of text, images and how to create links. If you've skipped the previous article which explains how to prepare your site for adding content, tools you need to edit pages and META tags, then just download a Simple HTML+CSS template for this and previous article to learn.

How to customize menu and create more pages for your site?

Different templates have from very simple to very complicated menu markup, so the easiest way is to copy one of the menu items and paste the copy right after the original item. Simple menu item usually looks like this (no link has been added to simplify the first sample):
<li> Menu Item </li>
<li> Just Copied The Prevoius Item</li>
Notice that you should copy the whole line with opening and closing <li> tag.

Edit Menu buttons in HTML web-template

Now take a look at the same menu with link applied:
<li> <a href="index.htm"> Menu Item </a> </li>
Where "Menu Item" is a text visible in browser on your menu button, and "index.htm" is your link to a particular page. Take it as a double layer wrap: the outer layer will be <li> tag (opening tag comes before the content of menu item, and the closing tag after the content ends), then the middle layer is a link tag <a> (inside of <li> wrapper), and finally inside of it will be the text of the link.
See image above, lines 23-27 with menu example. At the bottom of the image is modified line 24 with correct link applied.

Don't create pages for your website before you will customize header (the top part with your website title) and the menu in your index.htm file. Otherwise you will have to repeat the process of adding menu items for each page.

For example:
Edit the menu in the main file first: Rename the buttons and add links to them. Don't be afraid to create links before you will create pages. You will be using the main file to create other pages of your site by duplicating it, and renaming the duplicates with names you've given to your links, so you won't have to edit each file then.

How to use basic HTML tags to create or customize content?

First of all, add the content where it supposed to be added. Good template always have some samples of paragraphs and images to show where you should add them. Don't put it hell knows where, as it probably will break the page design.

how to Edit content text and headings in HTML web-template

<p> Your paragraph text goes here </p>
To create the paragraph of plain text you need opening <p> and closing </p> tags. Inside of paragraph tag you may put links, but don't put headings or images (it will work, but it's against of HTML rules and may result in errors). Line 39 on the image above shows how to use paragraphs in your HTML markup.

<h1> Heading One </h1>
This element is using opening and closing tags as well. Do not put headings inside of paragraph tags. You have to create two paragraphs and put heading between them to create text separated with heading. You may use links with that element, but you may not put images inside. If your template have styled more than one type of heading, you may use them as well, by adding <h2>, <h3> tags. Watch line 37 on the image above for example. Headings are very important for Search Engine Optimization, so write it carefully, using main keywords, and terms that your visitors may be using to find this text.

Line Break
Simple tag used to separate the lines. It moves any piece of content to a new line. You may use it inside of paragraphs.

<a href="index.html"> Text With Link </a>
Link can be applied to any text, image or heading. Put the link in href="HERE". Text or image that should be used as link is placed between opening and closing <a> tags.
<a href="link_sample.html"><img src="Image_Sample.jpg" alt="Image Description"></a>
This is a sample of Image with link applied to it. ALT attribute is used to describe both the image and link. Scroll down at the end of article to see image sample, as it's covered in Images topic.
<h1> <a href="heading_link.html"> Heading Sample </a> </h1>
That is Heading with link. There is a simple text (with link applied to it) is placed inside of opening and closing <h1> tags. It's the same "layering" structure as it was with menu items, <h1> wraps around <a> while <a> wraps around the heading text.

Links use relative paths. So link to file in ROOT folder of your site will look like "image.jpg" or "articles.htm". Link to file in sub-folder called "gallery" will look like "gallery/image.jpg". But again, keep your ROOT as neat as possible, use one sub-folder level. Don't bury your content into sub-sub-sub folders.

ADVICE: Be very careful with filename extension in your links. "index.html" and "index.htm" are different things. The page will look the same with either htm or html extension but link will be incorrect if the extension doesn't match. It's better to keep all pages of your site with one filename extension, so you won't mess up.

how to Edit content text and headings in HTML web-template

<img src="image_sample.jpg" alt="Image Description">
This element doesn't have closing tag. Just add the image source inside of img tag. "alt" attribute is required for serach engines, because search engines cannot see the content of your picture, so you will tell them with this attribute. See image sample above, line 43. If the image is relatively small, then the following paragraph text will float around the image - see preview on the image above (line 43 is an image, and line 44 is following paragraph). Though, some amateurish templates might not have rules for images and the text will be just dropped below the image.

how to add a link to large image to a small image thumbnail in HTML

This is how small image with link to an original large version will look like.
<a href="image_original.jpg"> <img src="image_thumbnail.jpg" alt="Image Description"> </a>
Where "image_original.jpg" is a large image which is being opened on click, and "image_thumbnail.jpg" is a little preview that is shown inside of your article on the page.

Usually the Galleries are pre-made in web-templates, so it's better to use a copy/paste option with replacement of demo content. But at least you will know without experiments which elements you should replace.

That's pretty much everything you need to know to create and manage your website from pre-made web-template.