Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML code clean up and suggestions.

Status
Not open for further replies.
towntopic

towntopic

Technical User
May 15, 2003
103
US
I was given the honor of putting together a support web site for my company and was wondering if anyone would like to take a look at the code and critique it. I have a feeling I could be doing things a lot more effectively, but I'm not sure how to or where to start. I've included the HTML code and would gladly email all files to anyone who want to take a closer look. If you'd like the files email me at jmyers@appcim.com Thanks in advance for any helpful insight...the place has already helped me a ton!

here's the code

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>&lt;&gt; HOME &lt;&gt; Applied CIM Technologies</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
var item = new Array();
Km=0; item[Km]=new Array(&quot;appcim.com&quot;,&quot; management, software, vending, e-mail&quot;,&quot;Applied CIM Technologies&quot;);
Km++; item[Km]=new Array(&quot;BC001.doc&quot;,&quot;&quot;,&quot;Bar Code Printing&quot;,&quot;bar, code, coding, printing, label, labels, missing&quot;,&quot;What to do if no bar codes appear on when you print bar code labels&quot;);

//NEW WINDOW PROPERTIES.
pageview=&quot;<html><head><title>Search Results</title></head><body bgcolor='FFFFFF' text='black' link='#9DB029' vlink='#9DB029'><table border=0 width=500>&quot;;

function search(formfld) {
//PLACE TO EDIT THE WINDOW PROPERTIES.
windw = window.open(&quot;&quot;,&quot;&quot;,&quot;toolbar=no,location=no,directories=no,status=no,menubar=no,height=500,width=500, scrollbars=yes,resizable=yes&quot;);
windw.document.write(pageview);
txt = formfld.searchvalue.value.split(&quot; &quot;);
findingval = new Array(); total=0;
for (i = 0; i < item.length; i++) {
findingval = 0; order = new Array(0, 4, 2, 3);
for (j = 0; j < order.length; j++)
for (k = 0; k < txt.length; k++)
if (item[order[j]].indexOf(txt[k].toLowerCase()) > -1 && txt[k] != &quot;&quot;)
findingval += (j+1);
}
for (i = 0; i < findingval.length; i++) {
n = 0; w = -1;
for (j = 0;j < findingval.length; j++)
if (findingval[j] > n) { n = findingval[j]; w = j; };
if (w > -1) total += show(w, windw, n);
findingval[w] = 0;
}
windw.document.write(&quot;</table><br><font size='1' face='Verdana'>Total found: &quot;+total+&quot;<br>&quot;);
windw.document.write(&quot;<INPUT onfocus='blur();' type='button' style='background-color:#9DB029; border-color:#9DB029; color:#FFFFFF-;' value='Close' onClick='self.close()'&quot;);
windw.document.write(&quot;<br><br><font size='1'><center>© 2003 by <A HREF=' target='_blank'>GUJUm0deL</A>. All right reserved. </center></font> </body></html>&quot;);
}

function show(which,dniw,num) {
link = item[which][1] + item[which][0];
line = &quot;<tr><td><font size='1' face='Verdana'><a href=&quot;+link+&quot; target='_new'>&quot;+item[which][2]+&quot;</a><br>&quot;;
line += item[which][4] + &quot;<br><br></font></td></tr>&quot;;
dniw.document.write(line);
return true;
}
</script>
<style type=&quot;text/css&quot;>
<!--
.SpecialLink:link {
color:#B00000;
}
.SpecialLink:visited {
color:#B00000;
}
.SpecialLink:hover {
color:#999999;
}
.SpecialLink:active {
color:#B00000;
}
-->
</style>
</head>

<body background=&quot;background_home.gif&quot; leftmargin=&quot;0&quot;>
<table width=&quot;719&quot; height=&quot;58&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<!--DWLayoutDefaultTable-->
<tr>
<td height=&quot;40&quot; colspan=&quot;6&quot;></td>
</tr>
<tr>
<td width=&quot;273&quot; height=&quot;16&quot;></td>
<td width=&quot;85&quot; valign=&quot;top&quot; background=&quot;home.gif&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='home.htm';&quot;></td>
<td width=&quot;91&quot; valign=&quot;top&quot; background=&quot;support_down.gif&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='support.htm';&quot;></td>
<td width=&quot;87&quot; valign=&quot;top&quot; background=&quot;downloads_down.gif&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='downloads.htm';&quot;></td>
<td width=&quot;90&quot; valign=&quot;top&quot; background=&quot;literature_down.gif&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='literature.htm';&quot;></td>
<td width=&quot;93&quot; valign=&quot;top&quot; background=&quot;contact_us_down.gif&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='contact_us.htm';&quot;></td>
</tr>
</table>
<form method=get action=&quot;javascript:void(0)&quot; onsubmit=&quot;search(this); return false;&quot;>
<tr>
<td width=&quot;250&quot;> <font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>
<input name=&quot;Input&quot; type=submit style=&quot;background-color:#FFFFFF; cursor:hand; border-color:#FFFFFF; border:0 font:Verdana, Arial, Helvetica, sans-serif; size:1; color:#9DB029;&quot; onFocus='blur();' value=&quot;SEARCH&quot;>
<input name=searchvalue type=text value=&quot;&quot; size=&quot;17.5&quot; maxlength=&quot;75&quot;>
</font></td>
</tr>
</form>
<p></p>
<table width=&quot;100%&quot; height=&quot;415&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td width=&quot;16&quot; height=&quot;23&quot; background=&quot;arrow_green.gif&quot;>&nbsp;</td>
<td colspan=&quot;4&quot; bgcolor=&quot;#9DB029&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href=' <div align=&quot;left&quot;><font color=&quot;#FFFFFF&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>APPLIED
CIM TECHNOLOGIES</font></div></td>
<td width=&quot;728&quot; colspan=&quot;5&quot; bgcolor=&quot;#9DB029&quot;> <div align=&quot;right&quot;><font color=&quot;#FFFFFF&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;><spacer width=&quot;10&quot;></spacer>HOME
</font></div></td>
<td bgcolor=&quot;#9DB029&quot;></td>
<td bgcolor=&quot;#9DB029&quot;></td>
<td bgcolor=&quot;#9DB029&quot;></td>
<td bgcolor=&quot;#9DB029&quot;></td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td rowspan=&quot;3&quot;>&nbsp;</td>
<td width=&quot;33&quot; rowspan=&quot;3&quot;>&nbsp;</td>
<td width=&quot;1&quot; rowspan=&quot;6&quot; background=&quot;dotline.gif&quot;>&nbsp;</td>
<td width=&quot;155&quot;>&nbsp;</td>
<td width=&quot;1&quot; rowspan=&quot;6&quot; background=&quot;dotline.gif&quot;>&nbsp;</td>
<td colspan=&quot;5&quot; rowspan=&quot;6&quot;> <table width=&quot;678&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;15&quot;>&nbsp;</td>
</tr>
<tr>
<td background=&quot;red_arrow.gif&quot;>&nbsp;</td>
<td width=&quot;663&quot;><font color=&quot;#333333&quot; size=&quot;2&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>TECHNICAL
SUPPORT </font></td>
</tr>
<tr>
<td colspan=&quot;2&quot;><blockquote><font color=&quot;#666666&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>[
search | solve | learn ] - [ <a href=&quot;support.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>CRIBWARE</a>
] [<a href=&quot;support.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>SUPPLY
BAY</a> ] [<a href=&quot;support.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>
TDS</a> ] [ <a href=&quot;support.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>QEO</a>
] [ <a href=&quot;support.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>EXPEDITOR</a>
] </font></blockquote></td>
</tr>
<tr>
<td colspan=&quot;2&quot;>&nbsp;</td>
</tr>
<tr>
<td background=&quot;red_arrow.gif&quot;>&nbsp;</td>
<td><font color=&quot;#333333&quot; size=&quot;2&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>DOWNLOADS</font></td>
</tr>
<tr>
<td height=&quot;20&quot; colspan=&quot;2&quot;> <blockquote><font color=&quot;#666666&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>[
most recent versions ] - [ <a href=&quot;downloads.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>CRIBWARE</a>
] [ <a href=&quot;downloads.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>TDS</a>
] [ <a href=&quot;downloads.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>QEO</a>
] [ <a href=&quot;downloads.htm&quot; class=&quot;SpecialLink&quot; style=&quot;text-decoration:none&quot;>CRIBWARE
Reports</a> ]</font></blockquote></td>
</tr>
<tr>
<td colspan=&quot;2&quot;>&nbsp;</td>
</tr>
<tr>
<td colspan=&quot;2&quot;>&nbsp;</td>
</tr>
</table></td>
<td width=&quot;1&quot; rowspan=&quot;6&quot; background=&quot;dotline.gif&quot;>&nbsp;</td>
<td rowspan=&quot;3&quot;>&nbsp;</td>
<td width=&quot;1&quot; rowspan=&quot;6&quot; background=&quot;dotline.gif&quot;>&nbsp;</td>
<td rowspan=&quot;3&quot;>&nbsp;</td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td width=&quot;155&quot; height=&quot;20&quot; bgcolor=&quot;#999999&quot;> <div align=&quot;center&quot;><font color=&quot;#FFFFFF&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>LATEST
NEWS </font></div></td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td width=&quot;155&quot; height=&quot;70&quot; bgcolor=&quot;#FFFFFF&quot;> <div align=&quot;left&quot;><strong><font color=&quot;#000000&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>1.16.2004
<font color=&quot;#B00000&quot;>&lt;</font> </font></strong><font color=&quot;#999999&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>CRIBWARE
6.5 complete with new CheckIn and CheckOut functionality is released</font><font color=&quot;#999933&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>
</font><font color=&quot;#000000&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;><strong><font color=&quot;#B00000&quot;>&gt;</font></strong></font></div></td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width=&quot;155&quot; height=&quot;20&quot; bgcolor=&quot;#FFFFFF&quot;><strong><font color=&quot;#000000&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>12.31.2003
<font color=&quot;#B00000&quot;>&lt;</font> </font></strong><font color=&quot;#000000&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;><font color=&quot;#999999&quot;>Applied
CIM Technologies announces an upcoming Work Order Maintenance Module</font><font color=&quot;#999933&quot;>
<font color=&quot;#B00000&quot;><strong>&gt;</strong></font></font></font></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=&quot;#FFFFFF&quot;>
<td height=&quot;175&quot;>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr height=&quot;1&quot; bgcolor=&quot;#FFFFFF&quot;>
<td height=&quot;1&quot; colspan=&quot;4&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
<td height=&quot;1&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
<td height=&quot;1&quot; width=&quot;582&quot; bgcolor=&quot;#333333&quot;><div align=&quot;right&quot;></div></td>
<td width=&quot;10&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
<td width=&quot;25&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
<td width=&quot;28&quot; background=&quot;email_us.gif&quot; bgcolor=&quot;#333333&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='mailto:jmyers@appcim.com';&quot;>&nbsp;</td>
<td width=&quot;55&quot; bgcolor=&quot;#333333&quot; style=&quot;cursor:hand&quot; onclick=&quot;location.href='mailto:jmyers@appcim.com';&quot;><div align=&quot;right&quot;><font color=&quot;#FFFFFF&quot; size=&quot;1&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot;>EMAIL
US </font></div></td>
<td height=&quot;1&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
<td height=&quot;1&quot; colspan=&quot;3&quot; bgcolor=&quot;#333333&quot;>&nbsp;</td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
Firstly, I'd agree with MrBelfry. It's so much easier to maintain using CSS.

Secondly, please read the following thread before posting further code:
thread216-745544

It's very hard to read when it isn't in the original HTML format. And if you don't want your email address spammed by &quot;scrapers / spiders&quot;, don't include it in posts.

But I'll take a look at the source. I'll mail you.

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
1. As MrBelfry points out, make use of CSS files. Work out what different objects (based on styles / background colors) you have, and try to come up with some descriptive (but short) class names. Remove your style definitions from the tags and replace them with classes. Also include it as an attachment so that you only have to modify it in one place - rather than cutting / pasting into several documents. The same goes with JavaScript files - place common functions within the one file. And maybe only have a maximum of 3 files included throughout your site.

2. Simplify your layout. Complex tables take longer to construct, so if you can create it without tables (using DIVs), or if you need to use tables for backwards compatibility with older browsers, make sure the tables are separate.
Code: 
------------------------------------------
| TABLE: Header / Banner with Navigation  |
------------------------------------------
------------------------------------------
|                                         |
| TABLE:         Body                     |
|                                         |
------------------------------------------
------------------------------------------
| TABLE:        Footer                    |
------------------------------------------

3. I tend to use 1pixel transparent gifs instead of
Code: 
&nbsp;
to fill in table cells. That way I can &quot;fix&quot; the width of cells, and I can control the height of them more easily without having to create complex (and multiple) classes in my CSS file. This probably isn't a very good (or recommended) HTML4 practice, but then I don't try to create complex tables that need to be fixed widths.

4. Make sure your code is valid HTML. You seem to have &quot;tr&quot; and &quot;td&quot; tags without parent &quot;table&quot; tags. I tend to use TABs as indents rather than spaces, since TABs are only 1 character, while 2-4 characters are common indents when using spaces. Extra characters, extra file size, extra time to download and render.

5. You might find the following useful. There is a lot of good stuff... which I'm constantly referring to:

I know this doesn't show you what to do, but it is something that is better learnt by example. My style may also not be the best style. And of course, since the web is continually evolving, I'm continually learning and still trying to &quot;catch up&quot; myself. :)

Pete.


Web Developer / CMS (Aptrix / LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
738
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
212
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top