Improvements

<HTML>
<HEAD>
  <!-- Created with AOLpress/2.0 -->
</HEAD>
<BODY BGCOLOR="#00ff40" LINK="#0000ff" VLINK="#0000ff">
<P ALIGN=Center>
<FONT COLOR="Blue"></FONT><BIG><BIG>Welcome to the student support
Pages</BIG></BIG>
<P ALIGN=Center>
These pages are designed to help students gain a greater knowledge of the
workings of a Computer, and try to explain the terminology, and uses of
&nbsp;the many components involved .
<P>
<P ALIGN=Center>
<IMG SRC="computer_typing.gif" WIDTH="262" HEIGHT="208" ALIGN="Middle">
<P ALIGN=Center>
For Information on the following Terminology, and devices ,please click on
the appropriate area
<P ALIGN=Center>
&nbsp;<A HREF="page1.html">The Heart Of A Computer</A>
<P ALIGN=Center>
<A HREF="Page2.html">The Motherboard</A>
<P ALIGN=Center>
<A HREF="Page3.html">RAM</A>
<P ALIGN=Center>
<A HREF="Page4.html">Processors</A>
<P ALIGN=Center>
<A HREF="Page5.html">Buses</A>
<P ALIGN=Center>
<A HREF="Page6.html">Secondary Storage Devices-Hard Drives</A>
<P ALIGN=Center>
<A HREF="Page7.html">Printers</A>
<P ALIGN=Center>
<A HREF="Page8.html">Monitors)</A>
<P ALIGN=Center>
<A HREF="page9.html">Scanners</A>
<P ALIGN=Center>
</BODY></HTML>

The text above is from a main page that links to a further 9 pages, could you tell me how to add buttons to the links and any suggestions as to how it could be set out better, with improvements
dypseyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

oubelkasCommented:
If I understand correctly :

instead of each <A HREF> put this

<input type="button" name="mybutton1" value="The Heart Of A Computer" onClick="location.href='page1.html'">

This for every button, change the name of each button, so mybutton2 and so on.

Joseph
0
oubelkasCommented:
Note here that each button will have a different length because of the text value in it. With IE you can solve this, but not with NS. NS doesn't support the style sheet for buttons.

But if you're using IE, try this code :

<HTML>
<HEAD>
  <!-- Created with AOLpress/2.0 -->
<style type="text/css">
..mystylebutton  {
   background-color:#D3D3D3;;
   font-family:Arial;
   font-size:8pt;
   font-weight:bold;
   text-align:center;
   color:yellow
   width : 250;
 }
</style>
</HEAD>
<BODY <!--BGCOLOR="#00ff40" LINK="#0000ff" VLINK="#0000ff"-->>
<P ALIGN=Center>
<FONT COLOR="Blue"></FONT><BIG><BIG>Welcome to the student support
Pages</BIG></BIG>
<P ALIGN=Center>
These pages are designed to help students gain a greater knowledge of the
workings of a Computer, and try to explain the terminology, and uses of
&nbsp;the many components involved .
<P>
<P ALIGN=Center>
<IMG SRC="computer_typing.gif" WIDTH="262" HEIGHT="208" ALIGN="Middle">
<P ALIGN=Center>
For Information on the following Terminology, and devices ,please click on
the appropriate area <br><br>
<center><input type="button" name="mybutton1" value="The Heart Of A Computer" onClick="location.href='page1.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton2" value="The Motherboard" onClick="location.href='page2.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton3" value="RAM" onClick="location.href='page3.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton4" value="Processors" onClick="location.href='page4.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton5" value="Buses" onClick="location.href='page5.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton6" value="Secondary Storage Devices-Hard Drives" onClick="location.href='page6.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton7" value="Printers" onClick="location.href='page7.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton8" value="Monitors" onClick="location.href='page8.html'" class="mystylebutton" style="width:250;"></center>
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='page9.html'" class="mystylebutton" style="width:250;"></center>
</BODY></HTML>

Just copy paste it. If you want anymore tips, just ask...

Joseph
0
oubelkasCommented:
oh, and please, not a GREEN background, you'd best stick with white or so...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

TheMadManiacCommented:
why not just an embedded image tag in an A tag?

<A HREF="page1.html"><IMG SRC="mybutton1"></A>

This way you can tell the coordinates together with the IMG tag.

Floris
0
TheMadManiacCommented:
doh i ment dimensions, not coordinates
0
mblaseCommented:
The BUTTON-type input was a good idea, but a more cross-browser solution would be:

<FORM ACTION="Page1.html"><INPUT TYPE="submit" VALUE="The Heart of a Computer"></FORM>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dypseyAuthor Commented:
Thank you for the help, I have done the things you advised and i now have a collection of buttons on the main page, but they dont link to anything. Do I now have to alter the other pages in the same way to connect them.  
0
oubelkasCommented:
mblase> I don't agree with your answer, it's not appropriate to have a submit form for each button. For a cross-browser solution just surround all the buttons with <form> </form> tags.

So :
<form>
<center><input type="button" name="mybutton1" value="The Heart Of A Computer" onClick="location.href='page1.html'" class="mystylebutton" style="width:250;"></center>
.....
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='page9.html'" class="mystylebutton" style="width:250;"></center>
</form>

dypsey>> with location.href='mypage.html' in the onClick event handler, it must work. Did you try it yet?

Joseph
0
dypseyAuthor Commented:
Joseph
I did try it but all i get is a list I.E
The Heart Of A computer
The Motherboard
Ram Etc, but they dont connect to the other pages, they are all button shaped but they dont work as buttons.
0
oubelkasCommented:
What do you see? Don't the buttons do anything, or do you see "cannot view page" or something.
What's the URL of your page, so I can take a look. Then, which browser are you using? And try to put an absolute URL like http://www.experts-exchange.com
instead of page1.html in the onClick event handler.

Let me know, because this HAS to work, ok?

Joseph
0
mblaseCommented:
<INPUT TYPE="button"> is not universally supported across all browsers (particularly older ones). <INPUT TYPE="submit"> is, however.

dypsey: are you sure you copied the complete code I provided? Can you republish the code as you have it now?
0
dypseyAuthor Commented:
I think the problem could be me, the web pages I am producing are for a college project (i'm a mature student). I have used aol press to produce these and they link to each other from a main page called frame.set1. The pages are not on the internet,but are viewed through the browser by opening the file on aol. by altering a few things the buttons now appear but they dont connect anything. I cant send you a URL because there isn't one and the browser i'm using is Internet Explorer 4.    
0
dypseyAuthor Commented:
The buttons work okay by changing "button" to "submit" but it just takes me to a blank page With the heading NO LOCAL FORM SUBMISSION OR SEARCHING
0
oubelkasCommented:
dypsey> with you using IE4, I'm surprised the input type="button" didn't work. Well, as mblase correctly mentioned, input type="submit" does work on older browsers. So therefore
mblase> sorry, I didn't agree then ok? No heartfeelingz?
Well back to the point, why on earth are you using AOL? Well, I guess you're stick with it, I personally think it isn't pleasure to work with. I'll check the error out...

Joseph
0
mblaseCommented:
Hmm. I suppose AOL must have some sort of block against form usage? How annoying....
0
oubelkasCommented:
mblase >> yep AOL just sucks big time. I think it cannot handle javascript handlers I guess.

So in this case I suggest you use images instead of buttons and let these link to your html pages. One little question though, why do you want to have buttons?

Joseph
0
dypseyAuthor Commented:
the reason i wanted to use buttons is I just wanted to make the pages look more professional, they all link together nicely but part of my assigment is to make a presentation with them, as for aol press it does seem to have limitations as far as making the pages more visually entertaining, and i suppose i ought to look for a better way of doing the next one's.
Thanks for the help anyway can i award points to you both and how.
0
mblaseCommented:
Speaking as someone who has some experience in the field of web design: buttons are one of the best ways to NOT make your pages look more professional. (Have you ever seen them used on a commercial website?)

May I suggest something as straightforward as this? Just as a starting point. Good design will carry you a lot farther than HTML gimmicks.


<P ALIGN=Center><FONT FACE="Arial,helvetica,sans-serif" SIZE="2">
<A HREF="page1.html">The Heart Of A Computer</A>
|
<A HREF="Page2.html">The Motherboard</A>
|
<A HREF="Page3.html">RAM</A>
|
<A HREF="Page4.html">Processors</A>
|
<A HREF="Page5.html">Buses</A>
<BR>
<A HREF="Page6.html">Secondary Storage Devices-Hard Drives</A>
|
<A HREF="Page7.html">Printers</A>
|
<A HREF="Page8.html">Monitors</A>
|
<A HREF="page9.html">Scanners</A>
</FONT></P>
0
oubelkasCommented:
mblase, dypsey,

I agree with mblase that buttons don't make your page more professional. What you also could do is summing up the issues. And when the mouse is over a link let it "glow". Use this following code :

<html>
<head>
<style type="text/css">
<!--
A:LINK { color: navy; text-decoration: underline; }
A:VISITED { color: navy;text-decoration: underline; }
A:ACTIVE { color: blue; text-decoration: none; }
A:HOVER { color: blue; text-decoration: underline; }
// -->
</style>  
</head>

<body>
<P ALIGN=Center>
<FONT COLOR="Blue"></FONT><BIG><BIG>Welcome to the student support
Pages</BIG></BIG>
<P ALIGN=Center>
These pages are designed to help students gain a greater knowledge of the
workings of a Computer, and try to explain the terminology, and uses of
&nbsp;the many components involved .
<P>
<P ALIGN=Center>
<IMG SRC="computer_typing.gif" WIDTH="262" HEIGHT="208" ALIGN="Middle">

<P>
<center><table>
    <ul>
     <tr><td><li><A HREF="page1.html">The Heart Of A Computer</A> </li></td></tr>
     <tr><td><li><A HREF="Page2.html">The Motherboard</A> </li></td></tr>
     <tr><td><li><A HREF="Page3.html">RAM</A> </li></td></tr>
     <tr><td><li><A HREF="Page4.html">Processors</A></li></td></tr>
     <tr><td><li><A HREF="Page5.html">Buses</A></li></td></tr>
     <tr><td><li><A HREF="Page6.html">Secondary Storage Devices-Hard Drives</A></li></td></tr>
     <tr><td><li><A HREF="Page7.html">Printers</A></li></td></tr>
     <tr><td><li><A HREF="Page8.html">Monitors</A></li></td></tr>
     <tr><td><li><A HREF="page9.html">Scanners</A></li></td></tr>
   </ul>
</table></center>

</body>
</html>

It works great with IE. (not sure with AOL though...)

dypsey >> if you want to give both mblase and me some points (which is very fair of course) then depending on how many points you want to give to each of us you could accept the best comment of one of us and post a new question for the other one with the same amount of points. Or delete this question and post two seperate questions, one for me and one for mblase titled "for the cool Oubelkas" and "for master blase" with each a certain amount of points. It's up to you my amigo! ;)

Joseph


0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.