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
|
