How To Build A Web Page

Learn how to build a web page and make it search engine friendly so that you get plenty of targeted web traffic.

You'll learn:

  • How to design a web page
  • How to make a web page template
  • How to add images
  • How to add links
  • How to make the most of the page title, description and keywords
  • How to make the web page more user friendly
  • How to get more targeted traffic by optimizing your web page for the search engines

What you see on this page is an overview. Click on the links for more detailed info.

How To Design A Web Page

The design part of building a web page is to make it look attractive, make it easy to use, and easy to maintain. Generally there is a header or header graphic that shows the site logo or name, a navigation system (or “navbar”), text, links to other pages and web sites, and often there are pictures.

A web page design doesn't have to be complicated to be successful, in fact often simpler is better. The design should suit your target market. A site designed for teenage music lovers would be totally different to a site for medical professionals, for example.

Look around at other web sites for your target market, find one you like the look of, and use that as a starting point to build a web page. Don't steal someone else's design, use it for inspiration.

Don't use too many colors on your page, it looks amateurish and unappealing.

You can design your web page completely from scratch on a sheet of paper then build it yourself, or what's easier, you can use purchase a template. I'm building this site with Site Build It, using one of their templates.

More about website design
Quick tips on designing a web page

How to Build A Web Page Template

After you plan your web page design, you need to build a template. Use tables to lay out different sections of the page then plug in the elements that are used on every page.

Put your header at the top, then use virtual includes for the navigation, the footer if you use one, and ads or anything else you want repeated on every page. Link to the style sheet then save the template with an obvious file name such as mytemplate.html.

When you build a web page you just have to put in your content, change the title, meta description and meta keywords, then save it with its own filename.

More about how to build a web page template

Style Sheets Make Design Changes Easier

Web pages are coded in HTML, and some of the built-in styles are pretty boring, so web page designers often change them. It's really annoying though to build 100 pages with a pink heading and then decide its the wrong color. It takes time to change 100 pages!

What you can do is use a cascading style sheet (CSS) to set all the styles you use in your website. It's a separate page saved as .css. All your other web pages call up and use that CSS page. If you change a style on the CSS page every other page is changed at the same time. It's great!

If you're going to build a web page with the default styles, you don't need cascading style sheets.

Learn style sheet basics here

Use Virtual Includes To Change Many Pages At Once

Virtual Includes are separate files that are used on your web page. They are great for navbars for navigation. If you want to add something to your navbar, you can change one file instead of one hundred individual pages. Change your virtual include file, upload it to your website host, and voila, every page on your site using that include is changed.

It's great for ads too. You can place the ad in a virtual include, link to it from whatever pages you want whether its a dozen, a hundred or your whole site, and if you want to change the ad you only have to change one page. Virtual includes are an enormous time saver.

Learn how to make virtual includes

Simple Navigation Methods Are Fine

If you use a template the navbar will already be there when you build a web page.

If you don't, you'll have to work out a navigation system. The simple left side navbar that I'm using works well, and is really all you need. Some sites have another small navbar at the bottom of the page, with links to the disclaimer, about us, privacy, and similar pages. Some have a navbar at the top of the page linking to the major sections of the site, with the left hand navbar linking to pages in that section.

Really though, the left hand navbar is fine, linking to level 2 pages that then link to level 3 pages through relevant links in the content.

Make The Page Title Work For You

People won't see the page title on the web page itself. It's right at the left top of the browser window, and it's also used in search engine search results and as a title for bookmarks. So use something informative that tells prospective visitors what your site is about.

Use the page keyword in the title to help boost your search engine optimization efforts ranking as well.

Description And Keyword Meta Tags

When you build a web page, your page editing software will let you enter a page description and maybe a keyword list. These are called the description and keyword meta tags.

The description is used by some search engines in their search results, so make it interesting and compelling. Use the page's keyword early in the description.

Often you'll find the software has nowhere to enter keywords. Search engines generally don't use the meta keywords to tell what the page is about anymore because this function has been so abused in the past. So if there's nowhere to enter them you can just leave them out or if you really want them, you'll have to enter them directly into the HTML source code.

If you can enter them, only put a few keywords in separated by commas. Put your most important keyword first. Don't use a really long list and don't stress too much about them. They're not that important anymore.

More on writing and optimizing the meta description tag

Make Your Page Easy To Read

If you want happy visitors make sure pages are easy to read.

People tend to scan online, and they're always ready to click out of your site to the next one if they don't see what they want, so the page must be laid out to take that into account.

The top of the page should say what the rest of the page is about, and you need to make good use of headings. That way your visitors can find what they're looking for more easily. Make your most important points at the top of the page.

Use plenty of white space. That means keep paragraphs short with a space between them.

Sans serif fonts work best online, so use Verdana, Arial, or Helvitica with a font size of 2 to make reading easier.

Black text on a white background is the easiest to read, so be wary about other combinations. Light colors as a background with dark text can work well. White text on a black background is not easy to read for any length of time for many people.

Red on blue? Forget about it!

Some people like to put a very light watermark type image under the writing that you can see while you're reading. It may be okay on their computer, but another computer may render the colors slightly differently making the text harder to read. Also, a lot of readers don't have perfect vision, and what looks good to someone with 20/20 vision could be a real problem for them. Personally, I think it's a bad idea to build a web page with a background image.

How To Add Images The Right Way

Pictures can brighten up a web page, but they can also make the page load slowly. Too slow, and you'll lose your visitor.

To make the picture load more quickly you can use graphics software to crop the photo to the part you want, then reduce its size.

Save photos in the jpeg format which you can then use to reduce the file size even more. Save images like logos with big areas of one color, and not many too colors, as gif files. These reduce the file size too. Never use bitmap files on your web pages because they take way too long to load.

Always use alternate text with your image. That's for the search engines, vision impaired visitors, and visitors who surf with graphics turned off.

You'll need graphics software if you're using pictures, but it doesn't need to cost you a fortune. There are free programs like gimp, which has more features than you will ever need. I use Adobe Photoshop Elements 2.0 which I bought several years ago for $30. Before that I used a free program I got with a magazine which did everything I needed.

More on adding web page images
How To Optimize Web Images

Make Links Obvious Or Risk Losing Visitors

You'll need to make text links to other pages. You can change the default colors for the links, but it isn't a good idea. Your visitors expect that links will be blue and underlined, so don't confuse them. If visitors don't realize links are links, they won't click through to other pages and you can lose sales.

It's possible to have images as links, but if you do then have text links as well. That's for the same reason as above.

If you link to another website make the link open in a new window. That way when your visitor closes the other site they'll be back at your site.

To get a bit of a boost with the search engines use the keyword of the pages you're linking to in the clickable text. Don't write click here for web page design tips, write something like “Click on the link for web page design tips.”

Optimize For Targeted Traffic

Optimizing your web page for your keyword helps you get a higher ranking with the search engines, and more targeted traffic.

Search engine optimization used to almost be a career by itself. The idea was to manipulate your web page to get top search engine rankings. It was so technical that it was even suggested that a webmaster should make different versions of a page that were optimized to rank highly in different search engines.

Search engines are much smarter these days and you cannot fool them into giving you a top ranking by changes to your web page. What you can do is let the search engine know what your page is about by providing “hooks” for it.

When you build a web page use your page keyword or a variation in your page title, description and keyword list. Then use it several times in the text. Most experts say to make sure your keyword is between 1 and 3% of the total words. Also, include the keyword in a text link. When you link to a page from other pages, put the keyword or a variation in the clickable text.

Apart from optimizing each page your best tactic for more traffic is to provide lots of pages with lots of quality information that your targeted visitors will be looking for. The search engines want sites with quality information in their index and their algorithms are designed to find those sites and rank them more highly. The search engines look at things like how many pages your visitor visits, how long they spend looking at your site, how many links there are to your site, and probably another hundred off-page criteria.

More about optimizing your web page to get more traffic.

Saving Your Web Page

Your web page can be saved with a .htm or .html extension e.g. my-web-page.html You should include your keyword in the page filename as part of the search engine optimization.

Uploading Your Files

To upload your web pages to your webhost you'll need an ftp program. You have to enter some information such as host name, username, password etc that you'll get from your webhost.

Uploading is then simply a matter of dragging and dropping files from your computer to the web host.

More on how to upload files.

Return from Build A Web Page to Building A Web Site home page