FJD1.com

Instruction

     index  |   links  |   news   |   tools       Advanced
Welcome to Trillium University's online course on basic website construction.
Presented by fjd1.com

    Steps
  1. Preliminary
  2. Design your site
  3. Uploading files.
  4. Testing your site.
  5. 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!

The Internet Society
We are a member of ISOC, the Internet SOCiety.

GC Computers - Computer Trade-Show Prices Everyday

Photos To Go
Type words describing
the photo you want




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.

  1. Preliminary
  2. Design your site
  3. Uploading files.
  4. Testing your site.
  5. More...

Click to visit our Neoworx products page
Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)


Fantastic Tools for Webmasters!

Boost your Internet speed - Download Now

CLICK HERE to find over 2000 computer items!

Click here to download freeware

GoClick - web pages with one mouse click


Impulse Software - Easy, Effective, E-commerce

ecBuilder Pro - software that sells!





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.

peopleprofit.com

ebusiness made easy

Download free software and computer tools.

AutoSurf

For further information, contact: fjdavies@yahoo.com