Welcome to Trillium University's online course on basic website construction.
Presented by fjd1.com
Steps
- Preliminary
- Design your site
- Uploading files.
- Testing your site.
- More...
Multi Level Mailing List Builder
FreeMailer2000 When you sign-up for Free, you will get your very own personalized FreeMailer2000 website along with your Unique URL. When someone signs-up from your FreeMailer2000 website, they become your First Level Downline. Similarly, when someone else signs-up from their Unique URL, they become your Second Level Downline and so on till 15 Levels. The trade off here is very light, only 14 people are able to send email to you in return.
Webrings
Click here for information about webrings mastered by fjd1.com Webings are a great way to surf the web by topic, and a good method of getting your pages noticed for webmasters.
Software
Trillium University maintains an archive at Ware.netfirms.com for software (and links to downloads) which you might find beneficial.
Join the BusinessForYou.Com
affiliate program!
We are a member of ISOC, the Internet SOCiety.
If you need professional help, send me an e-mail describing your needs and how to best contact you.
Sincerely,
F. Davies
fjdavies@yahoo.com
(360) 352-0242
ICQ 43536012
advertisements
|
Step by step instruction for creating a website.
2. Designing your site.
Perhaps it will make most sense to you if we begin by explaining what
a single webpage is, and create some example pages together. As we begin,
you will want to start with the creation of a directory or folder on your
computer to hold all the files we will need. I created one I named UPLOAD
and within it I have a separate folder/directory for each website which I
maintain or create. Create a directory/folder now, and then create another
one inside the first and name them with short simple names (8 letters is
sort of old fashioned, but still a very good maximum length for file names
and folder names alike, as you may wish to use a variety of programs etc.,
some of which do not work well with files having longer names.) I will
use the name ALLSITES folder when I am referring to the first folder and
for now use YOURSITE as the name of the folder inside which will hold
the bulk of what we create. I am assuming this is what you would have
created:
C:/ALLSITES/YOURSITE/
A web page is just a text file. Well, that, and other files which are
referenced by it, but in the end, it is itself just a plain old text
file like you may have been creating for decades. So let's start with
something you should be able to do already. Create a text file (use notepad,
or else remember to save your file as plain text if using wordpad or other text
editor.) After creating it, you will want to move it to your the YOURSITE folder
and rename it as index.html (use all small letters and call it EXACTLY that,
index.html. So now you have the following:
C:/ALLSITES/YOURSITE/index.html
This is not really a web page yet, as we have no information in the text
file we have created. But your system should recognize it as a webpage just
because it ends with .html. If you double click on it, it should open
up in your default browser as a blank (white?) page. If you change the
last letters from .htmlto .txt, then double clicking it should open it in your
default text editor. You may also drag it into a text editor program (or icon)
and it should again open up in that editor. If using Internet Explorer, you may
also view source, and your page will open in notepad ready for editing,
and you can drag it likewise into your browser programs such as Internet Explorer
or Amaya, or Mozilla, or Netscape etc. Get comfortable with this process and
try creating some other text files and changing them to html by renaming them,
perhaps one called links.html and about.html for starters.
Now we are ready to add the minimal code to say something.
We will start with noting that a webpage is created with a
text editor and so now, open your index.html page in
a text program to edit it. (Like we just did in the above
paragraph.) I like to also have the page displayed or parsed
by a browser (user agents are what they are really called),
so after I make the smallest of changes, and save the file, I can
refresh the browser and see the results instantly. Yes instantly,
as we need to know things are working and do not need to put the
pages up anywhere for testing. I do my very best to type
as little as possible so I copy and paste from one document to
another to speed thing up. Still, it is best to understand what
it is you are doing or you may simply be copying garbage and
errors from one place to another.
We will begin with sort of breaking that rule and cover this
first line superficially. Your document needs more than just
a name ending in .html, it needs to begin with information
telling the browser just exactly what kind of document it is,
and where more information is available about the document
type, the dtd to be a little more specific. As the first
few pages we create will not be using frames we will be
referencing the loose.dtd document found at www.w3.org.
Simply copy and paste the following right into the top of your
page (index.html which is opened in a text editor).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Save the
file (click file, then save if using notepad) then
go to your browser and refresh the page (in Internet Explorer
just hit your F5 key on very top row of your keyboard
or click view, then refresh.) Okay, the page
should still be blank, but we check just in case every time
we make a change. If the page is no longer blank then we have
made an error and immediately correct it.
Every page should basically get that same line of code placed at
the top of the document, the first thing which will be encountered
when a browser program parses the page. You will notice also that
this line begins with the "<" symbol and ends with
the ">". Everything which is intended to provide information
about the document and how it is to be treated is found enclosed
within the "<" and ">" symbols and these
are simply called tags. Anything which is not within a tag
is probably content and should be displayed by the browser.
These tags often come in pairs, with a starting tag and a separate
ending tag and a bunch of content, and other tags and stuff in between.
Such is the nature of this next tag, the html tag. This tag
should follow right after our first (the document type tag above) tag.
paste it in now if you wish, then create some more white space
(by tapping the enter key several times at the end of a line).
<html>
After all that white space, near the bottom past this the ending or
closing html tag, noting that it has a slash in it which indicates
that it is indeed an ending or closing tag *the starting or beginning tag does
not have a slash in it.)
</html>
Everything else will go between these two tags. Everything. But there is
still more. We have told the browser what kind of document it is and now
we need two more pairs of tags to separate the information pertaining to the
document from the actual content of the document. This next pair of tags is
also required, and defines the top portion of the page as reserved for
things which are about the document but not to be considered as something
which should be parsed or displayed. We will leave it empty for this
first example but return to it soon.
<head>
</head>
The lower portion of the page will contain the body of your
document and must have the starting and closing body tags
(following after the starting and closing head tags) and before the closing
html tag which should still be last thing on the page.
<body>
</body>
Now we add the (traditional for first programs) content,
"Hello World" in between the two body tags,
so that our whole page now looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
It is okay to add extra space in most of the document,
remembering that anything more than one space will
be treated by the browser as still just one space. This
can make reading the source code (what we see in the
text editor) much easier to read. Many people like to
indent also, but this is not my usual style personally,
and I tend to just separate blocks of code by an extra
blank line in a minimalist approach. Here is exactly
the same page, just spread out a bit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
There is one subtlety which should be mentioned here.
The extra line after the opening body tag and before the
hello world content may result in a single space being
inserted. Closing you code up tighter can sometimes put things
back into the alignment you desired when extra spaces appear
unexpectedly. (When I tested the code above, it looked exactly
the same with and without the extra spaces using Internet Explorer.)
Before going on to the next lesson, let's return to the head of
our document and add one more very important pair of tags, to
give a title (what you see in the bar atop your browser.)
<title>
My first html page, Hello World
</title>
You should copy and paste the above, between your head tags,
save the file, and refresh the page, to finish this
lesson. Just in case, here is the complete page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
My first html page, Hello World
</title>
</head>
<body>
Hello World
</body>
</html>
To make it easy to create more pages, I like to keep
one page empty of content and already populated with
these basic tags and other stuff which appears on every
page. I name this page blank.html and when I need
a new page I just copy it and paste it as a new document, renaming
it as desired. The page you have just created contains a bare minimum
of code, just enough to be a real web page (at least once you
have uploaded it to your website that is.)
Before proceeding to the next lesson I would like you to make
some additional folders/directories within the YOURSITE folder
you already made. Name one of them images, one of them
scripts, and one of them working, and one of them archive.
When you wish to save something you are changing or removing,
put it in your archives folder. If you have extra things which
are being worked on (saved lists and images for example) put them
there untill needed. The images you will use on your web pages will
go into your images folder and the additional scripts (code) can go
into the scripts folder.
For our next lesson you will need to have some images handy.
They should be JPG's, PNG's, or GIF's (they will end in
one of those three letters.) For now, make them not to big
say perhaps under 400 x 400 pixels. A picture of yourself
and a scan of your logo will be enough to work with, but they
can be of anything really.
Click here to proceed to Web Page Design Lesson Number Two.
- Preliminary
- Design your site
- Uploading files.
- Testing your site.
- More...
Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)
Hosting services include free tools and website hosting. Click on the banners above and make a website within the hour. Premium services are
exceptional and they have all the goodies and services you expect from
a host.
|