Our Mission
Our mission is to provide
you with as many tools as
possible for a little as
possible to start your own
home computing business
and be successful.
you with as many tools as
possible for a little as
possible to start your own
home computing business
and be successful.
| Contact us: 205-300-3325 |
ABCs of Computing at Home
Web Page Design
| Designing Your Web Page |
Once you have chosen your domain name and website host, it is
time to design you own site.
You can surf the Internet for look at similar sites. You may want to
model your site from one of theirs or try something new. You
select a web design template based on your website content and
alter it.
Some web hosts will even design a site from your specifications,
but it may be very costly. Others, like Yahoo, provide the domain
name free, it also has a couple of programs to design your site
that you can download onto your computer, and webhosting along
with a choice of 3 types of blogs (you only get one). The choice is
yours but do the research.
A basic setup for your first web site will work for now. It will be the
perfect learning tool. You will find several of these free on the
Internet. You can also find Free Blogs as well, but the free ones
have limited control. Some web hosts will allow you to fill out a
sample and view it before deciding to buy. This is good practice. I
filled out a couple just to see how they would look. Remember,
not all of them have the same templates.
In any event, the design will help keep visitors coming back. An
unattractive, disorganized site or one that is too complicated to
maneuver will only aggravate visitors, so keep it simple for you
first attempt.
Once you have completed designing the template, you will enter
your content. If you are working with a program, on the page where
you want to place text, click insert and text. Move the box to where
you want it. Expand or collapse it as you need to. Double click in
the box and type your content or clip and paste from a word
document. If you are working with Front Page using HTML
documents, use this basic format:
Example of an opening tag:
<html>
<head>
<title>Page Title</title>
</head>
<body>
The main part of the document goes here.
</body>
</html>
Example of a closing tag:
HTML in red are opening and closing tags. They define how a
web page is presented.
Another example:
Opening tag: <title>
Closing tag: </title>
HTML documents must include an opening <html> tag at the top
of the file, and the closing </html> tag at the end of the file.
Notice in the basic format the <head> section is below the
opening <html>. Your web page keywords, description, and page
title will go in this section. Again, you will have a opening and
closing tag: <head> </head> Your keyword, description,
and title tags must be placed between these tags.
The title of your web page will go between these tags: <title>
</title> This title will appear at the top of the browser window when
someone opens your web page. A bookmark will reflect the title of
this page.
Meta tags <meta> are used to describe your site and search
engines use them to catalog your web page.
Your content is the body of the page (text, images, and links) and
appears after the closing head tag </head> with <body> and
ends with </body>. In the body you can set up a background
image, page color, text color, or HTML links.
Example:
<body bgcolor="#000000" text="#ffffff" link="#0000ff"
vlink="#800080">.
Experiment with the HTML. You can use a blank form and insert
the code then view it in the browser to see the outcome.
An easy way to navigate through an extremely long page is the
use of anchor links. It connects a section of your page to a
particular area (a short cut). An anchor link consists of two parts:
The link code:
<a href="#myLink">Link</a>
The anchor code:
<a name="myLink">Anchor</a>
Note that the difference between the two links is the # symbol
within the tag, as well as the <a name> tag. To create your anchor
links:
First build your link code:
<a href="#myLink">Link</a>
(Note that this link features a # symbol within the tag, which tells
the browser to link to a corresponding anchor tag named myLink.)
Now create your anchor link. Use the exact same name as in your
link code:
<a name="myLink">Anchor</a>
Once again, this is not a normal link, because the link uses the
word name instead of href. Which is important, because it tells the
browser where to go when your first link is clicked.
<a name="news">The Latest News</a>
<a href="#news">News</a>
Or:
<a name="style">Styles</a>
<a href="#style">Cardigan Sweaters</a>
To see an example of a working anchor link, click "link":
link
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
anchor
time to design you own site.
You can surf the Internet for look at similar sites. You may want to
model your site from one of theirs or try something new. You
select a web design template based on your website content and
alter it.
Some web hosts will even design a site from your specifications,
but it may be very costly. Others, like Yahoo, provide the domain
name free, it also has a couple of programs to design your site
that you can download onto your computer, and webhosting along
with a choice of 3 types of blogs (you only get one). The choice is
yours but do the research.
A basic setup for your first web site will work for now. It will be the
perfect learning tool. You will find several of these free on the
Internet. You can also find Free Blogs as well, but the free ones
have limited control. Some web hosts will allow you to fill out a
sample and view it before deciding to buy. This is good practice. I
filled out a couple just to see how they would look. Remember,
not all of them have the same templates.
In any event, the design will help keep visitors coming back. An
unattractive, disorganized site or one that is too complicated to
maneuver will only aggravate visitors, so keep it simple for you
first attempt.
Once you have completed designing the template, you will enter
your content. If you are working with a program, on the page where
you want to place text, click insert and text. Move the box to where
you want it. Expand or collapse it as you need to. Double click in
the box and type your content or clip and paste from a word
document. If you are working with Front Page using HTML
documents, use this basic format:
Example of an opening tag:
<html>
<head>
<title>Page Title</title>
</head>
<body>
The main part of the document goes here.
</body>
</html>
Example of a closing tag:
HTML in red are opening and closing tags. They define how a
web page is presented.
Another example:
Opening tag: <title>
Closing tag: </title>
HTML documents must include an opening <html> tag at the top
of the file, and the closing </html> tag at the end of the file.
Notice in the basic format the <head> section is below the
opening <html>. Your web page keywords, description, and page
title will go in this section. Again, you will have a opening and
closing tag: <head> </head> Your keyword, description,
and title tags must be placed between these tags.
The title of your web page will go between these tags: <title>
</title> This title will appear at the top of the browser window when
someone opens your web page. A bookmark will reflect the title of
this page.
Meta tags <meta> are used to describe your site and search
engines use them to catalog your web page.
Your content is the body of the page (text, images, and links) and
appears after the closing head tag </head> with <body> and
ends with </body>. In the body you can set up a background
image, page color, text color, or HTML links.
Example:
<body bgcolor="#000000" text="#ffffff" link="#0000ff"
vlink="#800080">.
Experiment with the HTML. You can use a blank form and insert
the code then view it in the browser to see the outcome.
An easy way to navigate through an extremely long page is the
use of anchor links. It connects a section of your page to a
particular area (a short cut). An anchor link consists of two parts:
The link code:
<a href="#myLink">Link</a>
The anchor code:
<a name="myLink">Anchor</a>
Note that the difference between the two links is the # symbol
within the tag, as well as the <a name> tag. To create your anchor
links:
First build your link code:
<a href="#myLink">Link</a>
(Note that this link features a # symbol within the tag, which tells
the browser to link to a corresponding anchor tag named myLink.)
Now create your anchor link. Use the exact same name as in your
link code:
<a name="myLink">Anchor</a>
Once again, this is not a normal link, because the link uses the
word name instead of href. Which is important, because it tells the
browser where to go when your first link is clicked.
<a name="news">The Latest News</a>
<a href="#news">News</a>
Or:
<a name="style">Styles</a>
<a href="#style">Cardigan Sweaters</a>
To see an example of a working anchor link, click "link":
link
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
space
anchor
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
Background Images and Sound
Many sights have beautiful backgrounds like the photo above, but
dark backgrounds make it difficult to see writing and remember,
even though advertisers text links are highlighted in blue, they are
still difficult to see. Sound like the music found on this site should
be limited. It is a distraction if you are trying to get them to click on a
banner ad or a text link.
Script for type
Scripts for type are beautiful, but people with older computers or
older versions of Windows may not be able to view them on their
screen. If this happens, they will simply click off the page.
Images
Images that require high resolution may not be viewed on older
computers.
Many sights have beautiful backgrounds like the photo above, but
dark backgrounds make it difficult to see writing and remember,
even though advertisers text links are highlighted in blue, they are
still difficult to see. Sound like the music found on this site should
be limited. It is a distraction if you are trying to get them to click on a
banner ad or a text link.
Script for type
Scripts for type are beautiful, but people with older computers or
older versions of Windows may not be able to view them on their
screen. If this happens, they will simply click off the page.
Images
Images that require high resolution may not be viewed on older
computers.
Content
Remember that it is your content that keeps them there long
enough to see the ads. If they don't see the ads then they definitely
won't buy. Keep it upbeat and interesting. Avoid using articles like
the, a, or this whenever possible.
Remember that it is your content that keeps them there long
enough to see the ads. If they don't see the ads then they definitely
won't buy. Keep it upbeat and interesting. Avoid using articles like
the, a, or this whenever possible.