HTML Question, Please help.

Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
HTML Question, Please help.

Hello people!

 

I am making a web-page for my boss who owns a vet. clinic. I have never done this before. I'm trying to do it in HTML. But I have hit a few problems and I suck too much to figure them out.

 

I have a input box... and it goes like this.

( I'm not sure what the /cgi-bin/example.cgi means... I copy/pasted Laughing out loud)

 

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Directory:
<SELECT>
<OPTION SELECTED> ---------
<OPTION >Products and Services
<OPTION >Frequently Asked Questions
<OPTION>Tell us how we're doing
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>
<BR>

 

How can I make the seperate pages of "Products and Services", "Frequently Asked Questions", and "Tell us how we're doing" so that when I hit "submit" it will take you to the other page? I tried Something like <OPTION> <A href="www.myspace.com" Myspace!> </a> or something but that didn't work. I am getting my ass kicked by this box!!! If you want to see the whole page as of now and give me some tips feel free. Here is the code. Save in under notepad as title.html . Thanks! Also, if you see something that I could do to improve the "Professionalism" level or something that I do along the way that could be considered offensive or bad business ethics please let me know.

 

<html><META http-equiv="Pragma" content="no-cache"><META name="rating" content="General">
<head>
<title> Dr. Lange Veterinary Hospital </title>
</head>
<body><font size=8>
<CENTER><H1><U><EM>Welcome to Lange Veterinary Hospital!</U></EM></H1>
<H2><I> Dr. W.T. LANGE, DVM.<HR WIDTH="75%" COLOR="#FF0000" SIZE="4"></H2></I>
<H3> 2103 W. Houston <BR> Sherman, TX 75092 <BR> Office : 903-893-5561 <BR> Fax: 903-893-6598 <BR> Walk-Ins Welcome <BR> <I>No appointment required, except for surgery</I> <BR><BR> Office Hours: <BR> Monday - Friday <BR> 8:00 a.m. - 5:30 p.m. <BR> Saturday <BR> 8:00 a.m. - 12:00 p.m.<HR WIDTH="75%" COLOR="#FF0000" SIZE="4"></CENTER><BR>

<font size=6>

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Directory:
<SELECT>
<OPTION SELECTED> ---------
<OPTION >Products and Services
<OPTION >Frequently Asked Questions
<OPTION>Tell us how we're doing
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>
<BR>
<CENTER> <img src="http://i80.photobucket.com/albums/j162/Paintchipschild/Doggie.jpg"><img src="http://i80.photobucket.com/albums/j162/Paintchipschild/P4180003-1.jpg" border="0" alt="Harley2"><img src="http://i5.photobucket.com/albums/y190/Sandralol/IMG_1358-1.jpg">
</body>
</html>

 

- Josh


Visual_Paradox
atheistRational VIP!Special Agent
Visual_Paradox's picture
Posts: 481
Joined: 2007-04-07
User is offlineOffline
You should avoid using forms

You should avoid using forms for website navigation because it's inaccessible to those with some physical impairments. Far better would be a list of hyperlinks, for example:

<ul>
 <li><a href="www.example.com">Link One</a></li>
 <li><a href="www.example.com">Link Two</a></li>
 <li><a href="www.example.com">Link Three</a></li>
</ul>

Stultior stulto fuisti, qui tabellis crederes!


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Thanks!

Yeah but this looks so much better. Is there some way to anchor the links? and what about the problem that in order to navigate though the pages I wrote I have to have the URL as my C:/. When I set this up on the internet will this become a problem for other people?

We pop theist like Orville Redenbacher!


entomophila
ScientistSuperfan
Posts: 233
Joined: 2007-05-04
User is offlineOffline
HTML

Did you check out this site? It's been a while, but it has a few useful tidbits.

http://www.pageresource.com/index.html


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Thanks

Thanks for the assist but this site doesn't seem to have what I need Laughing out loud

I do appreciate the attempt though.

 

I'm trying to figure out how to get my drop down box to navigate to another page, sort of like a <a href> but with an imput box.

We pop theist like Orville Redenbacher!


entomophila
ScientistSuperfan
Posts: 233
Joined: 2007-05-04
User is offlineOffline
anchors

Have you tried adding anchors to the other pages that you want to link to? Sorry, I'm VERY rusty with HTML...

 

Maybe this one?

http://www.boutell.com/newfaq/creating/links.html


Arkanrais
Arkanrais's picture
Posts: 109
Joined: 2007-05-28
User is offlineOffline
Josh Clarke wrote:Thanks for

Josh Clarke wrote:

Thanks for the assist but this site doesn't seem to have what I need Laughing out loud

I do appreciate the attempt though.

 

I'm trying to figure out how to get my drop down box to navigate to another page, sort of like a <a href> but with an imput box.

Try this:


<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://.com">---------</option>
<option value="http://website.com/page1">Products and Services</option>
<option value="http://website.com/page2">Frequently Asked Questions</option>
<option value="http://website.com/page3">Tell us how we're doing</option>
</select>
 <input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

 

 

 

 


Mr. XC
High Level DonorSpecial AgentWebsite AdminPlatinum Member
Posts: 237
Joined: 2006-12-19
User is offlineOffline
Code I use

I use this:

Somewhere in <head></head>:

<script type="text/javascript">
function navOnChange() {
  location = document.navform.navselect.options[document.navform.navselect.selectedIndex].value;
}
</script>

Where you want the drop down:

<form name="navform">
<select name="navselect" size="1" onchange="navOnChange()">
<option value="x.html">x</option>
<option value="y.html selected>y</option>
<option value="z.html>z</option>
</select>
<input type="button" name="navopen" value="Open" onclick="navOnChange()">
</form>

 

"Ridicule is the only weapon which can be used against unintelligible propositions. Ideas must be distinct before reason can act upon them; and no man ever had a distinct idea of the trinity. ..." -- Thomas Jefferson


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Perfect

Thats what I was looking for! Thanks. I'm so new to this HTML though how would I link the pages together and what about. Can you tell me what some of these things mean? Laughing out loud

 

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://.com">---------</option> (What do I put here?)
<option value="http://website.com/page1">Products and Services</option>
<option value="http://website.com/page2">Frequently Asked Questions</option>
<option value="http://website.com/page3">Tell us how we're doing</option>
</select>
 <input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

We pop theist like Orville Redenbacher!


Mr. XC
High Level DonorSpecial AgentWebsite AdminPlatinum Member
Posts: 237
Joined: 2006-12-19
User is offlineOffline
Missing Function Definitions

displaydesc() and jumptolink() refer to JavaScript functions that are not included here. 

What you need to add is something similar to the navOnChange().

"Ridicule is the only weapon which can be used against unintelligible propositions. Ideas must be distinct before reason can act upon them; and no man ever had a distinct idea of the trinity. ..." -- Thomas Jefferson


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Mr. XC

Thanks! This also helps. If I can't figure out how to use the one above you I will give yours a shot. Laughing out loud I'm sort of going for simplicity mixed with professionalism. I know it's a crazy thought but I'm trying to keep it simple so I can change things as they happen. I'm still not sure how I can get all this on the net. Laughing out loud

 

Anyone know where I can get a domain name like... www.langevethospital.com or something for cheap?

We pop theist like Orville Redenbacher!


Mr. XC
High Level DonorSpecial AgentWebsite AdminPlatinum Member
Posts: 237
Joined: 2006-12-19
User is offlineOffline
Domain Name Registration

www.1and1.com is cheap if you want private domain registration.  If it is a company that does not mind its address, phone number, and administrative e-mail public, then private domain registration is unnecessary.  I have used www.godaddy.com for many years.

"Ridicule is the only weapon which can be used against unintelligible propositions. Ideas must be distinct before reason can act upon them; and no man ever had a distinct idea of the trinity. ..." -- Thomas Jefferson


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
So

to use the jumptolink() function I need to have something else somewhere? GAH lol... this is what I got so far

 

<html><META http-equiv="Pragma" content="no-cache"><META name="rating" content="General">
<head>
<title> Dr. Lange Veterinary Hospital </title>
</head>
<body><font size=8>
<CENTER><H1><U><EM>Welcome to Lange Veterinary Hospital!</U></EM></H1>
<H2><I> Dr. W.T. LANGE, DVM.<HR WIDTH="75%" COLOR="#FF0000" SIZE="4"></H2></I>
<H3> 2103 W. Houston <BR> Sherman, TX 75092 <BR> Office : 903-893-5561 <BR> Fax: 903-893-6598 <BR> Walk-Ins Welcome <BR><BR> Office Hours: <BR> Monday - Friday <BR> 8:00 a.m. - 5:30 p.m. <BR> Saturday <BR> 8:00 a.m. - 12:00 p.m.<HR WIDTH="75%" COLOR="#FF0000" SIZE="4"></CENTER>

<CENTER>
<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://.com">---------</option>
<option value="http://website.com/page1">Products and Services</option>
<option value="http://website.com/page2">Frequently Asked Questions</option>
<option value="http://website.com/page3">Tell us how we're doing</option>
</select>
 <input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>
</CENTER>

<CENTER> <img src="http://i80.photobucket.com/albums/j162/Paintchipschild/Doggie.jpg"><img src="http://i80.photobucket.com/albums/j162/Paintchipschild/P4180003-1.jpg" border="0" alt="Harley2"><img src="http://i5.photobucket.com/albums/y190/Sandralol/IMG_1358-1.jpg">

</body>
</html>

 

and my only real problem right now is that I have no real idea how to setup my <option value="http:blahblahalbha">Products and Services</option>. I'm pretty sure I just but the link in the ="x" field, but because I'm writing this all on my personal computer will it still work when I find some way to upload it to the internet? I read somewhere it works as long as it's all in the same directory... how do I put it all in the same directory?

We pop theist like Orville Redenbacher!


Arkanrais
Arkanrais's picture
Posts: 109
Joined: 2007-05-28
User is offlineOffline
Josh Clarke wrote:Thats what

Josh Clarke wrote:

Thats what I was looking for! Thanks. I'm so new to this HTML though how would I link the pages together and what about. Can you tell me what some of these things mean? Laughing out loud

 

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://.com">---------</option> (What do I put here?)
<option value="http://website.com/page1">Products and Services</option>
<option value="http://website.com/page2">Frequently Asked Questions</option>
<option value="http://website.com/page3">Tell us how we're doing</option>
</select>
 <input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

on that first option, I forgot to cut out the 'value' part of the tag. just cut&paste this over it : <option selected>---------</option>. as to the rest, I'm not too sure. some is a cut&paste from a website (can't remember which) I was looking at ages ago when I was coding my own website, so my HTML skills are pretty rusty


Visual_Paradox
atheistRational VIP!Special Agent
Visual_Paradox's picture
Posts: 481
Joined: 2007-04-07
User is offlineOffline
Josh Clarke wrote:Yeah but

Josh Clarke wrote:
Yeah but this looks so much better.

I disagree. Hyperlinks are much easier to use and their beauty is in their ease of use. Forms are cumbersome to everyone and essentially unusable for some. If you think the hyperlinks are ugly, you should consider using CSS to spruce them up so they look better.

Josh Clarke wrote:
Is there some way to anchor the links?

You can with JavaScript, but it will bloat your code and increase the amount of time that people have to wait for the webpage. Not only that, but many users, such as those using Firefox with the NoScript extension, will not be able to use the navigation. Hyperlinks are a much better choice.

Josh Clarke wrote:
and what about the problem that in order to navigate though the pages I wrote I have to have the URL as my C:/. When I set this up on the internet will this become a problem for other people?

Yes. If the browser reads the code of your page and sees a URL like C:\filename.jpg, the browser will look through the user's C: drive rather than fetching a file from the Internet, and the user will not have that JPG file on their computer so they'll be presented with a broken image. You should have the files uploaded to a webhost's server so you can access the files with a URL like http://www.example.com/filename.jpg, then use that URL in your code. For convenience, you can use relative filenames. For example, if your webpage is in the same folder as filename.jpg, you can use a relative URL like ./filename.jpg.

Stultior stulto fuisti, qui tabellis crederes!


Mr. XC
High Level DonorSpecial AgentWebsite AdminPlatinum Member
Posts: 237
Joined: 2006-12-19
User is offlineOffline
SEO

Another thing is that search engines will not be able to crawl to other pages using JavaScript. Using a sitemap that lists all of the URLs would get around that.

"Ridicule is the only weapon which can be used against unintelligible propositions. Ideas must be distinct before reason can act upon them; and no man ever had a distinct idea of the trinity. ..." -- Thomas Jefferson


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Okay so I have tried to set

Okay so I have tried to set it up so that the "Go" button would take me to the selected "page"... but it's not doing anything.

This is what I have in this area so far.

 


<CENTER>
<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected="http://.com">---------</option>
<option value="http://website.com/page1">Products and Services</option>
<option value="http://website.com/page2">Frequently Asked Questions</option>
<option value="file:///C:/Documents%20and%20Settings/Owner/Desktop/Lange%20Vet.%20Website/Main%20Directory/Hyperlink%20Pages/StaffHyperlink.html">Staff</option>
<option value="http://website.com/page5">Policies</option>
<option value="http://website.com/page3">Tell us how we're doing</option>
</select>
 <input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="center" style="font:italic 13px Arial">
</span>
</form>
</CENTER>

 

I want it centered Laughing out loud lol. So the one i'm trying to get to work is the "Staff" even though the page is FAR from complete... I just want to see that the "Go" button works.... I have done the same thing with just a button and it works... but the buttons look silly and unprofessional.

 

button was

 

<a href=file:///C:/Documents%20and%20Settings/Owner/Desktop/Lange%20Vet.%20Website/Main%20Directory/Hyperlink%20Pages/StaffHyperlink.html><button>Staff</button></a>

 

Thats the result I want to get but I want to get it using a drop down navigator type thing... any ideas why this one up there isn't working?

We pop theist like Orville Redenbacher!


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
I agree

I like how easy they are to use but the whole blue and underlined thing looks very silly to me. I'm going for something elegant.

We pop theist like Orville Redenbacher!


Arkanrais
Arkanrais's picture
Posts: 109
Joined: 2007-05-28
User is offlineOffline
Josh Clarke wrote:I like how

Josh Clarke wrote:

I like how easy they are to use but the whole blue and underlined thing looks very silly to me. I'm going for something elegant.

text/css fixes that by changing the font, background, table borders, hyper links and all else to whatever colour and/or style you want them as. You can take out the underline from them, make them bold, strike through or whatever other html font tags you want. on websites, I prefer to have a navigation bar on the side if the site contains a lot of content spread across many pages, as it makes getting around the pages easier so you aren't forever looking for links half way down a page (though it took me many hours to get a working one that didn't cut off text. they are a cunt to code if you are relatively new or not experienced in HTML). as an aside, did the options work properly? I've got noscript active so, as visual_paradox said, it stops all javascript and any other script elements from activating.


Visual_Paradox
atheistRational VIP!Special Agent
Visual_Paradox's picture
Posts: 481
Joined: 2007-04-07
User is offlineOffline
Mr. XC wrote:Another thing

Mr. XC wrote:
Another thing is that search engines will not be able to crawl to other pages using JavaScript. Using a sitemap that lists all of the URLs would get around that.


Good point, I forgot to mention that. The search engine robots that browse your website to figure out what it's about will browse it similarly to a person with a physical impairment. A pulldown menu will prevent them from crawling your site, which will make it much more difficult for people to find the veterinarian website when searching on Google, Yahoo, MSN, and so on. Pulldown menus can easily keep a website in relative obscurity, prevent its growth, and strangle the potential for profit.

Josh Clarke wrote:
I like how easy they are to use but the whole blue and underlined thing looks very silly to me. I'm going for something elegant.


http://www.w3schools.com/css/

 

 

Stultior stulto fuisti, qui tabellis crederes!


Josh Clarke
Superfan
Josh Clarke's picture
Posts: 107
Joined: 2008-01-27
User is offlineOffline
Ironically

My boss isn't paying me for this web site Laughing out loud... I'm just doing it for the fuck of it. If he likes it he will put it up online and pay the server fees, but we don't advertise. We have this silly little Vet. Association thing where I live, and all the Vets agreed not to advertise. I personally don't consider a high ranked google search an advertisement but we will see what he said. Anyways can't I add tags that aren't visible to the viewers but the robots still search? Anyways I'm just going to show him the slight draft I did today and see if he likes what he sees so far and if he wants me to continue. It's going to take me a shit ton of time if he wants me to do it but it's worth it. Maybe if we have a webpage people will stop calling to ask stupid ass questions. . . I really doubt that though.

Basically the web site is supposed to be a service we offer to our clients. That doesn't make alot of sense but it will have prices and schedules and whatnot on it. And basic information that helps our clients (and us hopefully so they don't have to call to ask stupid things like hours of operation or how much common stuff cost.) Knowing how people work I do realize that this entire attempt is probably pretty futile. The people who call and ask stupid things are usually stupid people. Thats not really fair to say is it? Laughing out loud

 

Anyways I will consider ethics and such after I have a few drafts on what works and what looks good and other things. Right now I have two, the drop down menu and a hyperlink version with <button> blah </button> format, it looks okay I suppose. I'm just having a bit of trouble designing something that both looks professional and is easy to navigate. It's very important to me that it doesn't look like something an idiot put together.

We pop theist like Orville Redenbacher!