dypsey
asked on
Improvements
<HTML>
<HEAD>
<!-- Created with AOLpress/2.0 -->
</HEAD>
<BODY BGCOLOR="#00ff40" LINK="#0000ff" VLINK="#0000ff">
<P ALIGN=Center>
<FONT COLOR="Blue"></FONT><BIG><
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
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>
<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">Processo
<P ALIGN=Center>
<A HREF="Page5.html">Buses</A
<P ALIGN=Center>
<A HREF="Page6.html">Secondar
<P ALIGN=Center>
<A HREF="Page7.html">Printers
<P ALIGN=Center>
<A HREF="Page8.html">Monitors
<P ALIGN=Center>
<A HREF="page9.html">Scanners
<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
<HEAD>
<!-- Created with AOLpress/2.0 -->
</HEAD>
<BODY BGCOLOR="#00ff40" LINK="#0000ff" VLINK="#0000ff">
<P ALIGN=Center>
<FONT COLOR="Blue"></FONT><BIG><
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
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>
<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">Processo
<P ALIGN=Center>
<A HREF="Page5.html">Buses</A
<P ALIGN=Center>
<A HREF="Page6.html">Secondar
<P ALIGN=Center>
<A HREF="Page7.html">Printers
<P ALIGN=Center>
<A HREF="Page8.html">Monitors
<P ALIGN=Center>
<A HREF="page9.html">Scanners
<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
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><
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
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='pa
<center><input type="button" name="mybutton2" value="The Motherboard" onClick="location.href='pa
<center><input type="button" name="mybutton3" value="RAM" onClick="location.href='pa
<center><input type="button" name="mybutton4" value="Processors" onClick="location.href='pa
<center><input type="button" name="mybutton5" value="Buses" onClick="location.href='pa
<center><input type="button" name="mybutton6" value="Secondary Storage Devices-Hard Drives" onClick="location.href='pa
<center><input type="button" name="mybutton7" value="Printers" onClick="location.href='pa
<center><input type="button" name="mybutton8" value="Monitors" onClick="location.href='pa
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='pa
</BODY></HTML>
Just copy paste it. If you want anymore tips, just ask...
Joseph
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><
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
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='pa
<center><input type="button" name="mybutton2" value="The Motherboard" onClick="location.href='pa
<center><input type="button" name="mybutton3" value="RAM" onClick="location.href='pa
<center><input type="button" name="mybutton4" value="Processors" onClick="location.href='pa
<center><input type="button" name="mybutton5" value="Buses" onClick="location.href='pa
<center><input type="button" name="mybutton6" value="Secondary Storage Devices-Hard Drives" onClick="location.href='pa
<center><input type="button" name="mybutton7" value="Printers" onClick="location.href='pa
<center><input type="button" name="mybutton8" value="Monitors" onClick="location.href='pa
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='pa
</BODY></HTML>
Just copy paste it. If you want anymore tips, just ask...
Joseph
oh, and please, not a GREEN background, you'd best stick with white or so...
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
<A HREF="page1.html"><IMG SRC="mybutton1"></A>
This way you can tell the coordinates together with the IMG tag.
Floris
doh i ment dimensions, not coordinates
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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='pa
.....
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='pa
</form>
dypsey>> with location.href='mypage.html
Joseph
So :
<form>
<center><input type="button" name="mybutton1" value="The Heart Of A Computer" onClick="location.href='pa
.....
<center><input type="button" name="mybutton9" value="Scanners" onClick="location.href='pa
</form>
dypsey>> with location.href='mypage.html
Joseph
ASKER
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.
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.
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 https://www.experts-exchange.com
instead of page1.html in the onClick event handler.
Let me know, because this HAS to work, ok?
Joseph
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 https://www.experts-exchange.com
instead of page1.html in the onClick event handler.
Let me know, because this HAS to work, ok?
Joseph
<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?
dypsey: are you sure you copied the complete code I provided? Can you republish the code as you have it now?
ASKER
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.
ASKER
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
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
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
Hmm. I suppose AOL must have some sort of block against form usage? How annoying....
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
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
ASKER
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.
Thanks for the help anyway can i award points to you both and how.
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
<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">Processo
|
<A HREF="Page5.html">Buses</A
<BR>
<A HREF="Page6.html">Secondar
|
<A HREF="Page7.html">Printers
|
<A HREF="Page8.html">Monitors
|
<A HREF="page9.html">Scanners
</FONT></P>
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
<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">Processo
|
<A HREF="Page5.html">Buses</A
<BR>
<A HREF="Page6.html">Secondar
|
<A HREF="Page7.html">Printers
|
<A HREF="Page8.html">Monitors
|
<A HREF="page9.html">Scanners
</FONT></P>
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><
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
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">Processo
<tr><td><li><A HREF="Page5.html">Buses</A
<tr><td><li><A HREF="Page6.html">Secondar
<tr><td><li><A HREF="Page7.html">Printers
<tr><td><li><A HREF="Page8.html">Monitors
<tr><td><li><A HREF="page9.html">Scanners
</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
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><
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
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">Processo
<tr><td><li><A HREF="Page5.html">Buses</A
<tr><td><li><A HREF="Page6.html">Secondar
<tr><td><li><A HREF="Page7.html">Printers
<tr><td><li><A HREF="Page8.html">Monitors
<tr><td><li><A HREF="page9.html">Scanners
</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
instead of each <A HREF> put this
<input type="button" name="mybutton1" value="The Heart Of A Computer" onClick="location.href='pa
This for every button, change the name of each button, so mybutton2 and so on.
Joseph