Hello all. I could use a bit of technical assistance with my website and thought it would be worthwhile to check with my fellow community members here at ASSEMblers. Basically I am looking for someone to optimize my existing code. This will require a bit of cleaning since I am not a professional web developer by any stretch of the imagination. Some of my code is antiquated and many errors exist when checking my template pages at http://validator.w3.org/. The website does display correctly across all browsers despite my coding deficiencies. This website itself is static in nature, with the exception of the blog sections which are driven using WP 2.84 with custom header\footer\etc. There is no DB interface in either the creation or maintaining of site pages or information. The site was built (and currently maintained) using FrontPage 2K3 (I am currently looking at upgrading to MS Expressions Web 3). I am looking to be able to maintain this myself after the initial optimization. All in all, I have around 10 pages that need to be optimized. This includes each of the WP custom PHP files. I can update the remaining 130 pages once I am able to see the example in your optimized files. I guess I better show you some samples to give you an idea… Sample Console Page Description This is one single page, no frames at all, with heavy use of tables throughout URL http://www.videogameconsolelibrary.com/pg90-3do2.htm W3C Validation report: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.videogameconsolelibrary.com%2Fpg90-3do2.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654 Sample Blog Page - 1 Description This one does use the WP CSS style sheet This does not display correctly in FF3. The body table aligns left instead of centered. There is also a blank ‘row’ at the end before the footer. URL http://videogameconsolelibrary.com/blogs/tan/ W3C Validation report: http://validator.w3.org/check?uri=http%3A%2F%2Fvideogameconsolelibrary.com%2Fblogs%2Ftan%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654 Sample Blog Page – 2 Description This one does NOT use the WP CSS style sheet Despite the errors, this one does display well across all browsers. URL http://videogameconsolelibrary.com/blogs/mg/ W3C Validation Report: http://validator.w3.org/check?uri=http%3A%2F%2Fvideogameconsolelibrary.com%2Fblogs%2Fmg%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654 From the validation reports, I can see\correct some of the errors (missing tag close), but I am not sure on the DOCTYPE to be used in the beginning. I am pretty sure that I have to fix this before trying to tackle anything else. The menu system that I utilize is purchased and does not require any customization – it is error free. I am not well versed in CSS (as evident in my code), so I would prefer to wait in the optimization in this area until I am more comfortable in this aspect. I am not looking at all to change the look of the website – I plan on enabling dynamically sized tables down the road but not at this juncture. I am looking to partner with someone I can trust – this is very important to me. 98PaceCar, Dark Watcher, Tan and I have worked hard at developing the content\look of VGCL. Like ASSEMblers, my site is provided free to all with no advertisements whatsoever and will remain that way. That being said, pro bono work is always welcomed and would be mentioned throughout our site at the top of every page (“Page Optimization by Nameâ€) along with a prevalent ‘Friends’ link. I understand if a small donation to the web optimizer is required. Thanks for taking the time to read through this. Best regards, Terry
First of all, I tried to manage an html-based console encyclopedia in the past and after passing the 150 articles it turned out just impossible. Your site looks great, but in the moment you need to change something you may find yourself in a big trouble. Learning something about templates in PHP (mostly the include() function) is quite easy and would help you a lot keeping the site clean and easy to modify. IMO I don't like to use WYSIWYG editors, they're easy to understand and work with but they tend to generate heavy and dirty code. Starting to learn to code can be hard but you'll be amazed once you see what you can achieve when you have total control of the pages. However, going to the first link, I can give you some basic advices: Don't use obsolete tags. The first thing I noticed in the code was the use of obsolete HTML tags and properties, most of times these work to keep backwards compatibility, but they're not standards compilant. Between these tags you can find <ul> and <li> tags inside tables, which have been replaced by <tr> and <td> respectively. In lines 127 and 128 you can find deprecated properties like topmargin or marginwidth, these are handled by a CSS property called margin. Don't mix tags that do the same thing.I also found that in the same page, to work with tables you use <ul> and <li> in a moment and <tr> and <td> later. Using different tags that do the same gives place to confusion and makes the code harder to understand. Choose a set of tags (check that it's not obsolete before) and work only with it. Replace styles in tags for a stylesheet. I saw that a lot of CSS code in your page is right inside the HTML, this makes the page heavy to load, and the code heavy and hard to read. Putting all the CSS styles used on the page on a stylesheet, these don't have to be loaded every time you change a page, as well as you can reuse the same style for many parts of of the page. Indent. If you want to understand the code is essential to use some indentation, otherwise every time you need to find out where does a tag end or if a certain piece of code is well placed you'll find yourself in a huge trouble. For more information and small tutorials about web standards, I recommend you to go to http://www.w3schools.com. Good luck with it and let me know if you need any other help :thumbsup:
It looks like one of the big reasons the W3 Validator is woofing its cookies at you is because you don't have a DOCTYPE tag. In my experience, the results from it are useless when it tries to "guess" the doctype on its own. You should figure out exactly what version of HTML you're targeting here and put in the right doctype, then see what kind of errors you get. Also, I want to heartily second z_killemall's recommendation to factor out your menus and such, using the PHP include command.
Thanks for the feedback guys - much appreciated. I agree that I need to move in the PHP direction that you are referring to. All of the pages are custom since content varies so I have this as a challenge as well as my lack of experience in PHP. The code does get ugly when using WYSIWYG apps - I clean up some of it, but my pages definitely need some more attention in the maintenance area. Is there a good resource that you can recommend that lists the codes for a specific DOCTYPE? I use <tr> and <td> for rows\columns. <ul> for underline and <li> for list item. Am I using two different languages and combining them per chance? Using a style sheet is definitely the way to go (for the general page layout). The big chunk of CSS you see at the beginning is for the menu system - it is being loaded there since the menu is java based but if the user does not have this enabled the CSS based menu is displayed (hence they will always see my menu). This was a menu system that I purchased and customized for my site - no code except for the menu items\headers\etc. is mine. I have a somewhat strong base of programming to rely upon (VB primarily), so I am familiar with routines\functions\etc. Any good PHP tutorial sites that you can recommend? Thanks again guys for your assistance - much appreciated!
I'm sorry, I got a bit confused in the moment I told you that was wrong (I haven't used <ul> and <li> in a long time ). However, there are some really important errors in the code, like the redeclaration of the <body> tag. This tag marks the beginning and the end of the page's body and it must be only declared once. Other error that appears is the <style> tags declared inside <body>. If you need to declare CSS styles inside the HTML, you must do it inside the <head> tag. Talking about using the id attribute in the DIV tags, you're using the same id in many different DIVs. Every id must be used for a single element, if you want to give styles to many similar elements use the class attribute instead. Here's an example to give you a small (really small) idea of how the page should look after correcting that stuff. I tried to indent it but the forums keep deleting the indent :banghead: <html> <head> <title>Title of the page</title> <style type="text/css"> h1 {color:red} p {color:blue} </style> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="divclass" id="one"> <p>Random junk</p> </div> <div class="divclass" id="two"> <p>Some similar junk</p> </div> <div class="differentclass" id="three"> <p>This junk looks different</p> </div> </body> </html> To get a good start in PHP I would recommend you two sites: w3schools and php.net. There are many other sites filled with tutorials, but many of these don't follow some of the W3 standards, so they're definitely not the place to start...
