Web Page Design

[Harold R]

I needs some advice on web page design software. I get some space from my ISP for a web site, (I forget how much), but when it comes to designing a web site....I don't know where to start. I've down loaded a couple of the free web page designers, but they have no tutorial. A friend tells me one is usually included in a Microsoft bundle, but I don't seem to have one with mine. Any advice is welcome. Besides posting tractor related pictures, I have family out of the country, and I feel it would be easier to post family pictures on my web and they could just bookmark it.

[Bigdog]

HR - send a PM to Lildog. He does a great job of web page design (if I may say so) . He can tell you what he recommends for beginners. I believe he mostly just writes the html code himself but can recommend a couple of software programs.

[Rudi]

Harold:

Depending on what you want to do, it is not all that difficult to write HTML. If you have the time and the inclination, learning HTML is not that diffiuclt. Hey, if I can do it, anybody can.....

If however, you want it toot sweet, then it may be simpler to say contract it out to Lil Dog or another web page designer. Be advised though that a lot of web page designers no longer write basic code, but use HTML Generators or engines such as Microsoft Front Page. MS Front Page is usually bundled in MS Office Professional and has been since at least MS Office Pro 97. (I have it, that is why I know..)

Be aware too though, that as with all things connected with visual basic based programs, the end product can be quite large. It has to do with layering. By learning to write basic HTML yourself, you can keep your pages very small.

For example. The index page at Cub Manual Server is only 11.3KB in size... yup, that is kilo bytes, not mega bytes... it is small, yet contains an awful lot of information.

There are guides on the net strictly for that, to help those of us who are not programmers to write basic HTML.

It is rather easy. Takes a little time, but it can be done.

Here is an example of what I used to learn HTML, (although the site I used way back in Win95OSR-1 days I haven't been able to find).

A Beginner's Guide to HTML.

Also, most used book stores have big and I mean BIG books on how to write HTML that you can usually get for about a buck. Seriously, the demand is not great, and they want to move em. Chapter's here in Canada regularily has sales on books for HTML and other computer applications that are like 95% less than their suggested price, and sometimes more....

Another little trick I learned... if you find a page that has something interesting on it that you like, you can actually see the source code(HTML) by right clicking anywhere on the page and then clicking View Source.

You can then have a look at what they are using for code to write the interesting part of the page you found. Since HTML is open sourced you can actually use the same code, however, do understand that although the code is open sourced, the actual page may itself be copyrighted. If not specifically copyrited, it is intellectual property and cannot be used without permission. However, the code itself can be provided that you modify it to reflect the data you intend to use. I know this should be like an ahh duhh statement, but just wanted to be clear about that...

If you find gif's, bmp's, icon files and stuff that you like you can also right click and save them. Most are open sourced as well, however, those that are specifically copyright protected are locked and cannot be saved... so it is pretty much safe to assume that if you can save it to your hard drive you can use it legally.

If you do choose to do your own HTML, then I would be willing to help it you need it. Got a question, ask away and if I can answer I will, if not, I will consult my 16 year old daughter... she probably has the answer... yeah, she writes real nice code, and also is familiar with Generators and Engines.

Oh, btw, if you have Corel Word Perfect 8 or better, you can actually do most of your web page stuff in a word processor and save it as an HTML file with a .htm extension. It is still much larger, but it can give you an idea about writing HTML.

Oh, one other word on that, sometimes these generators, or engines use Hexadecimal equivalents and other syntaxes to create the HTML. It can get confusing, but you can simpy copy the statement that you want explained, paste it into google and you can usually get an explanation..

I hope this helps.. I do get carried away on topics I am interested in. I also like to see people experimenting..... it is fun expecially on a cold winter's day when you aren't California Dreamin....

[lildog]

Harold,

If you're just getting started and all you want to do is create web pages for a few friends and family members, you may already have everything you need if you have Microsoft Word on your system. Word has a feature that allows you to create Web pages from templates or convert word documents you've already created to HTML.

However, Rudi definitely tapped into one of the major drawbacks of using MS products to create web pages. They tend to favor MS technologies (Internet explorer, Visual Basic, Active-X) and write unnecessarily bloated code. The newest versions of Office actually write XML, as opposed to HTML, which is great for business applications, but kinda like using a chain saw to trim your moustache for most home efforts. It's overkill, but it works.

If you have the time and inclination, I would definitely encourage you to try to learn a little bit of HTML. Even if you decide to use a WYSIWYG (What You See Is What You Get) editor to create your pages, it will still help you in the long-run to understand what's going on under the hood. Two great resource I've used, both to build my skills, but also in the HTML class I teach here at work:

HTML Goodies
W3Schools.com

A free WYSIWYG editor that's getting a good deal of buzz in the developer circles I frequent (though I have not tried it myself) is NVU. It's based on the Mozilla project code, so it's pretty true to HTML standards - meaning maximum compatibility, no matter what your visitors are using. You can download it from http://www.nvu.com

If you decide you want to try writing the code yourself, try out the program I use:

HTML-Kit

It is a great tool that helps you write code with a combination of toolbar buttons and the ability to create templates and code snippets. It also color-codes your HTML, making it easier to understand and troubleshoot. You can preview your code using a variety of browser engines, right inside the editor. I highly recommend it.

Hope this helps and feel free to ask questions as you learn.

[Harold R]

Thanks Lildog and Rudi. I want to try to learn HTML. I'll take these pointers and get started, but rest assured I'll have a question or two.
Thanks......HR

[Jim Becker]

First time I wanted to put a web page together, I started with Front Page Express, which was included on the Win 98 system I was using at the time. I very quickly ran into some limitation, where it didn't suport putting something basic (like maybe a horizontal line) on the page. At that point, I dumped the html it had generated into a file and started using Notepad to modify it.

The Cub FAQ was sort of the same thing. Bob Brooks used some generator to do the first version. I did later revisions (and the additional pages) by just writing the html.

Turns out to have been time well spent. For my current job, I write programs that generate html.

[Harold R]

OK, I'm having a little success with html. I have a "page" so to speak, with color background, heading, some brief text and a clock. However, the tutorial is not clear to me on the inter-active buttons. I can make a button, with the correct color and text within the button. But don't I need to have a destination that the button will send? And that place would be on the server of my ISP? So I'm thinking I would need to upload a directory specific to what ever I want the button to bring up. Preferably, a page of thumbnails. ?????

[George Willer]

Harold,

You live just down the road from the best web page writer in the world, IMHO, my son Joel. He wrote our web page (and the university's) by typing code directly, and referred to an index of a folder on the ISP that contains all the pictures... both small for thumbnails and large for direct viewing.

If you open our web page, right click, and then view source, you'll see what he did and how.

http://members.toast.net/gwill/

[Rudi]

Harold:

Ignore the whole aspect of the ISP or an Internet based server. You don't need it at this stage of the game.

This is what you do need. And this is exactly how I set up my whole server.

I was given a specific directory on the server to use, so I used the same directory name and structure for my local hard drive. Also, this is going to be the same setup as it gets burned to CD or DVD or whatever in the future, when I can get it all to work right...

Everything MUST work on your local drives before you upload to your ISP or an independant server host. Upload and download is a real pain when breaks have to be fixed. Work locally, upload finished working product.

I will give you examples for my Cub directory which happens to reside on my D: drive. Also I am going to use my TC-37F Group 12 - Power index to help explain.

D:\Cub\index.html (or htm)
D:\Cub Parts Manuals\index.html
D:\Cub Parts Manuals\TC-37F Revision 3\index.html
D:\Cub Parts Manuals\TC-37F Revision 3\Group 12 - Power\index.html

This is how it is set up to get to that particular directory. There has to be a path for everything and it has to be PERFECT otherwise you will bang your head figuring out the boo boo when not if you make em. I just spend 2 hours last night doing the same thing.

The page that I want to show you is D:\Cub Parts Manuals\TC-37F Revision 3\Group 12 - Power\index.html.

Here is the code:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="R.H.">
<meta name="GENERATOR" content="Mozilla/4.74 [en] (Win98; U) [Netscape]">
<title>Group 12 - Power</title>
</head>
<body background="backgtractor.bmp"><center>
<centre><img src="IH Logo.gif"></center>
<center>


<center><h1>Group 12 - Power</center></h1><br>

<center>

<TABLE border="0" width="450">
<TR>
<TD><h3>
</center>
<center>
<a href="Page 12-01.jpg">Page 12-01</a><br>
<a href="Page 12-02.jpg">Page 12-02</a><br>
<a href="Page 12-03.jpg">Page 12-03</a><br>
<a href="Page 12-04.jpg">Page 12-04</a><br>
<a href="Page 12-05.jpg">Page 12-05</a><br>
<a href="Page 12-06.jpg">Page 12-06</a><br>
<a href="Page 12-07.jpg">Page 12-07</a><br>
<a href="Page 12-08.jpg">Page 12-08</a><br>
<a href="Page 12-09.jpg">Page 12-09</a><br>
<a href="Page 12-10.jpg">Page 12-10</a><br>
<a href="Page 12-11.jpg">Page 12-11</a><br>

</TD></h3>

<TD><h3>

<a href="Page 12-12.jpg">Page 12-12</a><br>
<a href="Page 12-13.jpg">Page 12-13</a><br>
<a href="Page 12-14.jpg">Page 12-14</a><br>
<a href="Page 12-15.jpg">Page 12-15</a><br>
<a href="Page 12-16.jpg">Page 12-16</a><br>
<a href="Page 12-17.jpg">Page 12-17</a><br>
<a href="Page 12-18.jpg">Page 12-18</a><br>
<a href="Page 12-19.jpg">Page 12-19</a><br>
<a href="Page 12-20.jpg">Page 12-20</a><br>
<a href="Page 12-21.jpg">Page 12-21</a><br>
<a href="Page 12-22.jpg">Page 12-22</a><br>

</TD></h3>

<TD><h3>


<a href="Page 12-23.jpg">Page 12-23</a><br>
<a href="Page 12-24.jpg">Page 12-24</a><br>
<a href="Page 12-25.jpg">Page 12-25</a><br>
<a href="Page 12-26.jpg">Page 12-26</a><br>
<a href="Page 12-27.jpg">Page 12-27</a><br>
<a href="Page 12-28.jpg">Page 12-28</a><br>
<a href="Page 12-29.jpg">Page 12-29</a><br>
<a href="Page 12-30.jpg">Page 12-30</a><br>
<a href="Page 12-31.jpg">Page 12-31</a><br>
<a href="Page 12-32.jpg">Page 12-32</a><br>

</TD></h3></table>

<br>

<a href="\Cub\TC-37F Revision 3\index.html"><img src="\Cub\Back.gif" border=0></a>

<a href="\Cub\index.html"><img src="\Cub\Backmainp2.gif" border=0></a>
</center>

</body>
</html>


Your question is: I can make a button, with the correct color and text within the button. But don't I need to have a destination that the button will send?

If you look above to the lines of code before </body> you will see 2 statements that indicate <img src="xyz">

In the second one which is the simplest the line is basically saying - ok, if I press this button, then the button will redirect me to the Cub Manual Server MAIN Page. And the button is called HOME. You will notice that the img src is directed to "\Cub\Backmainp2.gif ". This gif resides in the root directory (or what will/is the root directory on the server) and is constant for ALL pages within the whole server. This allows you to be able to cut and past a lot of code eliminating the need to retype every time you do an index page.

In the first one, you can see that it actually directs you back to the previous index which in this case is the \Cub\TC-37F Revision 3\index.html or the Parts Manual Main index.

The <a href=...> statement is what determines where the button will take you. It is also what makes a link active.

I hope this helps some....

Oh and Lil Dog.... if you can see whatever errors are in the Meta section, I would appreciate any tips.... I still have a hard time understanding it. I know it is what is used by search engines... but ... that is about it. I still have tons to learn.

Harold, I try to keep everything as simple as possible. I am a firm believer in the KISS principle and adhere to it as oft as possible. I am not out to win any prizes or attaboys on webpage design. For me it is an issue of funtionality. I want something somewhat attractive where all the information is pretty clear, the paths are clear and make sense and that it is easy for both users to navigate and for me to do diagnostics for lack of a better word when links break....

Oh another point. In each subdirectory you have an index.html file or a .htm file whichever you prefer. In that directory, I always include my Background[backgtractor.bmp], Logo gif [IH Logo.gif} as a minimum. There may be other files that you will use that should be in every directory as well depending on your structure.

Hope this helps, let me know...

[Harold R]

Thanks Rudi...give me a day or two to digest that. Since my wife broke her leg, I'm having to do house work too, so between laundry loads... I do a little typing. George, I've always like your web site and that's pretty much what I want. I looked at all that code......people do this from memory? That son of yours is sure talented in many areas.

[Patbretagne]

Lildog, you may remember a few weeks ago I said I wanted to ask you a question?
Well, that is exactly the question I was going to ask, many thanks HR.
Having seen Rudi's reply and having downloaded Nvu I'm going to have a go myself.
From what Rudi posted it looks somewhat baffling, but as he says If he can do it...... We shall see!
Only one thing, I do hope that in undertaking this excercise, that HR and I are not going to become GEEKS
Thanks anyway!
Pat

[lildog]

When I teach my HTML classes, I use the analogy that HTML is just word processing without the word processor. If you can use the likes of Microsoft Word or WordPerfect, you already know most of the mechanics behind HTML.

When you're typing something in Word for example, and come to a section you want to be boldfaced, you click the "B" button, type what you want bolded, then click that button again to toggle the boldface off again.

The same is true in HTML. You type the text you want and when you want boldface, you type the <B> tag (I try to argue that the angle brackets are just like the edges on the toolbar buttons in Word). Next, you type the text you want bolded, then finish with the </B> tag to toggle boldface off (again, the visual cue is the slash indicates the button is depressed).

Most tags in HTML work just like the toggle buttons in your word processor. <I> for italic, <B> for bold, <P> to create a new paragraph (same as the "Enter" key), etc.

It's important to remember that HTML is NOT PROGRAMMING. It is simply a Markup Language - that is, a shorthand that tells the browser which elements to use and what to do with them.

[Rudi]

John:

Well done

Very well explained.

You are so very right. HTML as a markup language is indeedy not really programming. Programming involves basic languages such as Unix, Linux, Cobol, Stress, Fortran, C Plus ad nauseaum and is a very intensive hobby to be in. If one thrives on stress - then programming is for you.

However, I like many no longer can handle the stess, so a language like HTML is really easy and relaxing. I write HTML to relax and actually accomplish stuff of meaning when I cannot get out and play tractor..

Anyways, HTML is just like using Word or Word Perfect, except that instead of pushing buttons you add the brackets, slashes etc., along with the abbreviated term for whatever it is you want to do. Once learned, it will surprise you at how often you actually write in the code instead of using the buttons. I find it much faster.. and far easier to just punch in the code than be searching for a button.

By reading your last post, I can see how being a student in one of your classes on HTML would probably not only be informative and confidence building, but be very enjoyable and mostly a lot of fun.

Way to go

Harold, Pat, enjoy, cause it is a lot of fun, and it is very rewarding especially as you get a new idea worked out, a gif to animate, a pic properly centred and a table spaced correctly. It is a blast...

Enjoy

[Harold R]

Now that I have my page pretty much like I want it.......now what. I know I have to do something to make the clickable buttons point to somewhere. This is done before, or after the page is uploaded? I need a tutorial on this, plus, one on how to arrange photos. Do I make a file with the same title as the buttons, and transfer corresponding pics to that file?

[400lbsonacubseatspring]

clickable button how to:

First you need to create your buttons, in an image editor software program.
I like paint shop pro, from jasc, personally, but just about anything will let you create a button.

you create the clickable button on your page with an a href tag, using the url of the link you'd like the button attached to within that tag.

You use the img tag to place the button....something like this, if I can remember the dummy bracket codes...LOL

ok...we don't need the dummy codes here...LOL

< A HREF = "http://www.whateveryouwanttolinkto..." > < IMG SRC="http://urlofyourbuttonimage" > < /A >

Now, if you want to do really precise placement of your text, images, etc...that's a job for the table tag, which is a whole different animal altogether, and perhaps a topic for another thread.

Something which was good form at the beginning of the WWW, was to write the HTML code in all capitals, for the benefit of those of us who read the code source with our own human eyes, and not with an editor program. This practice has gotten lost along the way, but, some of us old-timers still do it.