|
INTRODUCTION:
What is a WEBSITE?
A website is just a bunch of web pages connected together
with something called a LINK. In HTML there
is a special tag called (you guessed it!) the 'LINK
TAGS' and it looks like this in its most basic form:
<a href=""> </a>
Here is an example of the link tag with a destination
filled in:
<a href=" https://www.virtualsplat.com ">
Go to virtualsplat.com</a>
It's safe to say that we have all used links when surfing
the web. Whenever you click on a link that takes you to another
page, you are using a link tag. The link tag
is the most important tag in HTML; it makes the Internet interconnected!
In the above example we saw that the link tag points
the web site www.virtualsplat.com and the text that
is displayed by on the web page is: 'Go to virtualsplat.com'.
So if you wanted to create a link that took someone to say
www.yahoo.com , you would replace the www.virtualsplat.com
with www.yahoo.com , Yahoo's address.
Like all other tags, link tags have an opening tag
(<a href=" https://www.virtualsplat.com ">)
and a closing tag (</a>).
Links tags are a little more complex than the other
tags we have seen so far, but now we think that you can handle
it!
Some of you may have noticed that the there is some text in
the link tag that comes before the web site address;
the text we are talking about is :
https://
https:// text tells the browser that the link is pointing
to a web page . sometimes links can point to other things
besides web pages; things like movies, PDF files and so
on.
Absolute vs. Relative URL
To link pages in your web site from one page to the next you
have a choice of using one of two types of addresses:
1. Absolute addresses (complete)
2. Relative addresses (partial).
Before we go on, URL is a nerd's way of saying 'address'.
An absolute URL is the complete address
of a page that can be found from any other location on the
Internet.
So let's say you have a page called contact.html on the
root of your web site who's domain name is www.myStore.com
. In this case the absolute URL of the contact.html page would
be: 'https://www.myStore.com/contact.html'.
Ok, now we know we lost a few people because we used a word
that we did not explain: 'root'. When nerds talk about the
root of a web site, they are taking about the base of the
web site, the starting level.
The files (pages, images etc.) that make up your web site,
are organized in folders just like any other files that you
store on your home computer. Your web server host will give
a space / directory on their server for you to place
all your web sites files. This space/folder assigned
to you will be the 'root' of your web site. This means that
as far as the Internet is concerned, anything (html files,
images other folders etc) in this folder is directly accessible
by your domain name plus the name of the item. Huh! Even I'm
a little confused! Perhaps a little example to show you:
Lets you built your website where on the root level
you had these HTML files:
Index.html
Contact.html
And in a folder called 'products', you placed who bunch
of other pages with one called 'bookcases.html'. You
decided to put all your product HTML pages into a 'products'
folder to keep the web site more organized. A smart thing
to do!
Can you guess what the Absolute URL would be
for the web page 'bookcases.html'?
For the domain name: www.myStore.com it would be:
https://www.myStore.com/products/bookcases.html
Just think about it a little and hopefully it will sink in!
If it doesn't right away don't worry, it will come.
A Relative URL is a partial address that is
relative to the page where you placed your link. So if you
were linking from the index.html page of this web site to
the bookcases.html page your relative URL (address) would
be:
/products/bookcases.html
And the actually link tag would look like this:
<a href="/products/bookcases.html">
Check out our bookcases!</a>
You are basically telling the browser that the HTML page we
want to load is in the products folder.
Play around with links and folders on your own web site and
things will become very clear; if you get the address wrong
it won't load!
Ok, here is an one more example to help you guys and gals
out there; lets say you wanted to link to the page 'contact.html'
from the 'index.html' page:
<a href="contact.html">Contact us</a>
Since the page 'contact.html' is on the same level as the
page 'index.html', we need only include the name of the html
file in the link address.
Summary of the process in creating a web site
Now that we got some preliminary theory out of the way (that's
a good thing!) we can actually list the steps you should take
when starting a web site project.
Define the purpose of web site:
When you are first approached with a web site project or you're
looking to build your own, you must first clarify what the
goal of the website. Knowing your goal will impact on the
choices you make when putting it together and ultimately contribute
to its success or failure.
This may sound obvious, but many web sites seemed to be put
together where the goal is not kept in mind. The result is
a messy web site that is disorganized and harder to build
and maintain.
So if for example, if the goal is to create an e-commerce
web site that sells products, then as a web site designer,
you have to consider things like the following:
Do you need credit card processing capabilities?
Are you going to need a shopping cart system to take orders?
How many items will be sold on the web site?
This is just one example; the point to take away is that
by defining the purpose, you can better prepare and get the
right tools / people for the job.
Diagram structure of website:
A simple diagram helps to visualize the web site for both
you and the client. Nothing special is really needed, just
a series of boxes representing each page in the site with
lines connecting them showing the linking strategy. A pyramid
scheme is usually used show the hierarchy of a web site from
the splash /home page down.
Write out the text for the web site:
Before you start writing any HTML, you should (in your favorite
word processor) write out all the text that you need to include
in the website, doing so will help you with the design process.
Another thing you should do is to make sure that the text
is finalized before it gets to the web site; it is much easier
to correct things in a word processor than in an HTML page.
Choose a basic structural layout that will be used on
all pages:
Armed with your website diagram and your web sites' text
(complete text!) you can now choose a basic layout for your
pages. You can go crazy with some funky artsy web site (and
sometimes it can work), but most of the time, you should use
standard layouts that people are used to:
Left side navigation.
Top navigation
Right side navigation.
Choose the basic color scheme and fonts for the site:
Your next task is to start considering the basic colors and
fonts that you're going to use. You want to choose a style
that fits the subject of the web site. For example:
pink doesn't do well for a hardware store . maybe some steel
blues instead!
The point to take away is to establish the style of the web
site before you start creating pages, otherwise you may find
yourself redoing pages over again!
Later on in this tutorial, we will teach you
How to use an easy to use technology that makes web sites
a breeze to style: CSS
Build out the web site.
With the above completed, your ready to actually start creating
your web pages. All this really is using the structure you
developed in steps 1 to 6 to create your web pages and linking
them together.
Now is a good time for you to practice a little and actually
build yourself a small little web site!
If you can't think of something, create one on your favorite
movie with a page for each main character. Remember that
you only get good at doing something by doing it!
Choose a domain name
All web sites need a domain name, and your choice
of a domain name can impact on how many people find it . so
choose carefully!
Here are some points to remember when considering your
choice of a domain name:
Domain names tell you something about the web site
are food for search engines and they help clue people in too.
If for example you were building a website for a hardware
store, a domain name like 'discountHardware.com' is pretty
good, it tells you everything about the web site immediately.
If you called it 'bigSteel.com' instead, you can argue that
we are not giving such a clear message of what's the web site
about. Even if the hardware store were actually called 'Big
Steel Hardware', I would go with 'discountHardware.com'.
Search engines like Google will look at several elements
of your web site to try and determine what your page is about.
One of those key elements is the domain name. Google
will look for keywords in the domain name that helps the 'Google
bot' (Google's automated snooper software)
to categories your web site.
One question that is asked often enough is whether the domain
name has to have the same name as the business it is representing;
the answer is no. Next!
Register your domain name
This can trickier than you think, since many of the good
domain names are taken. You can pretty much forget about single
word domain names like, business.com and auctions.com, they
are long gone! You will need to come up with combination words
like 'discountHardware.com'.
Today you have many more options for domains; in the past
businesses could only register a .com's because .net and .org
domains where reserved for special types of organizations.
Those old restrictions are now gone, and there are a wide
variety you can choose from:
.com, .net, .org, .tv, .biz, .tv, and several others. In terms
of the search engines, they don't really make a difference
which ending you use.
Some people might argue that the first thing to do is to
register your domain, then build your web site.
That may be true if your website design is impacted by the
domain; for some this is the case, and for others it isn't.
You can make that call.
How do you know if a domain is already taken?
The quickest way to figure this out is to type in the domain
name in your browser and see if it takes you anywhere. This
is not always useful though because some own domains but don't
put up a web site!
So the best way is to go to your registrar, and they
have a form where you can check to see if domains names
are available just by typing it in.
The best thing about going to the registrar is that when you
type in a domain name your interested in their systems will
not only tell you if the .com is available they will also
give you the scoop on all the other variations. A big time
saver.
Find a hosting company:
what to look for in the hosting compan?.
Today, hosting web sites cost much less than what it
did just a few years ago, and that's a good thing. You can
go from zero cost hosting, to very pricey solutions, depending
on your web sites needs.
What can affect a web sites hosting cost?
Traffic - more traffic can cost you more per month. But for
this to affect you, you would have to have a pretty popular
web site. Since you are just starting out, I wouldn't expect
that problem for a while.
Extra features / services - you may need to use a database
(for e-commerce) or need many email accounts, extra disk space
to store all your websites files. Each host will have a list
of plans that you can choose from depending on your needs.
In the end you have to choose the hosting company and hosting
plan that is best suited to for your web site. Cheaper is
not always best, but it may be good enough for you.
Upload your web site to the hosting companies servers
Once you created your web site, paid for your domain name,
and picked your hosting company, it's time to upload the web
site onto your host servers for the world to see. Typically
you would use something called FTP to do this; you hosting
company should be able to help you with the details when setting
up your account.
Some quick tips to remember Keeping web pages small -
under 60k
Keeping content headers (H2 tags) clear and to the
point.
Keep paragraphs small.
Keep contact information (email - phone) easily found
in same place on all pages.
Keep look on structure of the web pages consistent
across all pages.
Provide a 'Home' button to take the user back to the
cover page of the website.
Make sure links are always underlined. (Don't use CSS
to remove the underline: big mistake if you do since people
assume that underlined texts are links.)
The company logo should appear on every page in same
spot and it should always be a link back to the home page.
Now that we have a good idea of what building a website is
all about we can move on to the next subject:
Using Cascading Style Sheets (otherwise known
as CSS) to help us make out pages look great!
|
