|
HTML - An Example Of Why Valid Html Is Important
I figured I would just post this since having a problem with it this morning...
Please bear in mind that I do recommend following the strict doctype - its just that I'm stuck with a CMS written about 8 years ago for this particular site I had the problems with. Anyway - our client noticed that there are styling discrepancies in IE... I checked the source code and found the following (the document is served as HTML4.01 Transitional): HTML Code: <p><font face="Verdana, Arial, Helvetica, Sans Serif" size="1">Blah<br> </p><p>More blah</p> What was happening in IE was that the unclosed <font> element was being terminated when the browser encountered the </p> tag... What was happening in FF was that the <font> element was being closed and then a new element placed in subsequent paragraphs... Hence, discrepancies in style between the two browsers... So - even when using an older doctype, it is important to check your code is well-formed and valid... As for me - I've now got to sit with our application developer and fix the CMS software... Similar TutorialsHi all i am new to this forum i am designing my forum in html language i need a very important html code that prevent visitor from viewing the content before registration could any member help me plz ? best of luck for all Hi, I have been searchign aroudn for some free scripts for scrollign news. All the ones i find use Iframes or have other elements whcih dotn validate for me. Any ideas where i can find one? The main requirements are below: Editable container size which the news scrolls in Editable speed of scrolling Ability to put links in the scrolling news news to scroll when loads, but on mouse over the news pauses so people can read the items. Cheers Rick We probably all know that if we run our HTML through the W3C validator, it will inform us if we've illegally nested one element inside another (e.g. placing a div within a span). Likewise, it will inform us if we've placed an element on the page but haven't used the correct containing element (e.g using a br, but not placing it within a p). What I'm looking for is some kind of documentation or reference guide that I can use, so I don't have to do a Google search every time I want to know if I'm correctly nesting elements! I would have thought that this would be defined by the XHTML schema at http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd. While this schema does define all the elements, it doesn't define how they are allowed to be nested in one another. Where can I find the documentation that defines correct nesting of elements? It must exist somewhere... I recently finished creating this html/css layout design. It's been put together with the use of tables, and is valid CSS and XHTML 1.0. However it just won't seem to show up correctly in any browser other than Internet Explorer. What is up!? Can someone please check my code over and help me out? I need to have this done by tomorrow and am totally lost! Thanks in advance! Here's the URL: http://barrel-house.ca/test/ Hi, i seem to remember that it was possible to have a different layout in IE and FF by using "!important" somewhere in the css page. does this still work? how does it work exactly? thanks Hello, I need help... I am making website for Ipod/iPhone games... It will be most for Game Friend codes.. However I can't find any info how to make option that if person will want to add code.. I need that box for puting code and then that code goes to the lines for example: http://www.petslivecodes.com/ This site is not my, but I want to make same or similar table with option that person will be able to add his friend code... Please It will be great if I Get this help. I post here because I think it is just html code.. But I am to dum make one ^^^ Waiting For help so Bad =0 Replay here if u know how to do it I will pay you Through paypal for INFO You might say that html, body, or head are most important as maybe search engines are not so forgiving of seriously faulty markup. This poll is more for keywords - which tag is most important for keyword optimization? title hi my friends I have question and please answer me, how to write the HTML code design a calculator? This is my feeling on the entire subject. .net is a perfectly acceptable domain extension, it is valid and I have never really heard of .net domains as disrespectful. However, the majority of internet users when typing in a web address will by reflex use the .com extension. So, if you only have one domain and it is .net, the odds are pretty good a person typing your web address in their browser window will type xyz.com and not .net, leading them to never reach your website. For the domain name you really like, would it still make sense if you added the two letters va (for virtual assistant) after it? You can always purchase your second choice domain and keep an eye out for your favorite (they expire, so at some point down the road you may be able to purchase it). One other piece of advice, buy both .com and .net domain extensions for the domain you choose. Domains can be purchased pretty inexpensively...this way you are covered should a person use the .com OR .net extension when typing in your web address. Hi, First of all I want to thank you ahead whoever can help me out with this; I need someone to help me to finish the table layout that I have attached in the picture This is the code I got so far but now I'm just stuck; HTML Code: <html> <head> <title> Sep 7 Tables</title> </head> <body> <!--Table code--> <table bgcolor="yellow" width="100%" height="100%" border="2" cellpadding="20" cellspacing="20"> <tr height="100"> <td colspan="2" align="center">This area is the header for logo</td> </tr> <tr> <td rowspan="2" width="40%">Links <table WIDTH="100%" BORDER="1" bgcolor="white"> <tr> <td> Nested table-r1c1</td> </tr> </table> </td> <td height="2" align="center">New </td> </tr> <tr height="199"> <td colspan="2" align="center">Sports</td> </tr> <tr height="50"> <td colspan="2" align="center">copyright</td> </tr> <!--end Table code--> </body> </html> thank you Hi, I'm new to this forum and this is my first post...Because I needed some help... I have some files on my site which i want others to see e.g. xml files and swf files but I wnat to deny direct access to them through the url e.g if they wrote in the adddress bar http://htmlforums.com/flashfile.swf then they wouldn't be able to access it i.e they can only access it through my site... Someone please help me with this... Thanks (by the way i have a .htaccess file and ...no nothing about html codes and stuff) Thanks I have been creating a number of sites just using title pages and i never used meta tags such as keywords and description. i now realised that someone advised that many pages goes into similar ones shown by google. so, do i need to use meta tags? is not using meta tags hurt my se rankings? Hey Chaps, Being a professional web designer, I used to read articles in this discipline and recently got a superb one and thought of sharing it with you.. Here are 15 important website design tips that you might not be aware of or have overlooked. Consider taking advantage of them if you haven't already done so... 1. Custom 404 Pages Create a custom 404 web page, so that any time your website visitor mistypes or misspells a URL on your site, they will still be provided with navigation options for your site (instead of getting nothing but a "Page Not Found" error message, which is neither friendly or helpful). 2. Redirect Non-www. To www. Website visitors will often leave out the "www." portion when they type a URL or link to your website. Set the website up so that it automatically redirects any non-www version of your domain URLs (http://domain. com) to the www version (http://www.domain. com) of your website. 3. Properly Sized Graphics Size and define all graphics and images on your web pages properly and correctly. Web pages will load quicker if the graphics contained on each page are properly defined so they don't require the web browser to re-size them. Properly sized and defined images can reduce the web browser workload and speed up the page loading time. 4. Favicon Add a Favicon (favorite icon) to your website, so that your company or product logo appears in the URL box. This icon will also show up in a bookmark list, and gives the web site an added level of professionalism. 5. Include RSS Auto-Discovery If you offer an RSS feed for any content on your website, be sure to include auto-discovery code in the header of your website. This will allow many browsers and RSS readers to automatically detect the presence of an RSS feed and alert the visitor that it is available. 6. Alternate Domains Domain names are relatively inexpensive, so you should register multiple domain versions and extensions in order to protect your brand. The varied domains can be parked on the main website, simply to prevent others from obtaining them. Registering alternate domain versions will help protect your brand. 7. Consistent Navigation Navigation should remain consistent on a website. As a website visitor moves through the website, the navigation bar should remain in the same place on each page. This will make it easier for visitors to navigate your website, and become more comfortable as they move through your site. 8. Home Goes Home The main graphic, company logo, or "header" at the top of the site should be included on every page in the site, and should always return the visitor to the home page of the website. This has become a web standard, and most visitors now expect to return to the main page of the site simply by clicking on the main top graphic from any page within the site. 9. Copyright Notice Include a copyright notice on the bottom of each page contained on the website, and keep it current! It may seem trivial, but an out-of-date copyright notice can send a message to your visitors that the website and its content may be out-of-date as well. 10. Meaningful File Names Use meaningful file names for any files, graphics, or web pages. Many search engines look at file names as part of their search algorithm, and using keywords in file names may help to improve search engine rankings. 11. Hyphens vs Underscores When naming files and webpages, use hyphens (i.e. web-page.html) rather than underscores (i.e. web_page.html) for the file names. It is much easier for search engines to separate and index the keywords when hyphens are used. 12. Alt Tags Use ALT tags to describe what images represent on web pages. ALT tags not only assist visually-impaired visitors in knowing what the images are, but they also help with search engine ranking. 13. Spell Check Use a spell-check feature on the text of all web pages in a website. A website that contains mistyped or misspelled words just shouts "unprofessional". Take the extra few minutes necessary to check the spelling of text on each page of your website. 14. Test After making changes to a website, test it! Many times, a webmaster will upload changes, confident in their abilities, only to later discover that in their attempt to fix one thing, they have "broken" something somewhere else. Make testing a habit after making even the most minor changes! 15. Keep It Simple Simple is good. Remove unnecessary clutter and distractions from a website and navigation menu. ... Good luck mate.. TIA for your response. YAY SOLVED THANKS TO COOTHEAD This thing is driving me nuts... over the last 36 hours i, along with a helpfull member of this community have been trying to fix some SIMPLE code that wasnt broken in the first place. It displays fine, when tested in Dreamweaver, tests fine in IE, FF. The several adjusted codes even display fine inside the test previewer of the mail program on www.yourmailinglistprovider.com ! The trouble starts when the email HTML code gets sent to the Gmail & Hotmail inbox. Both my inbox' are stuffed with test mails.. and it isnt going to end any time soon I have CODE 2 that wont load up the CSS image tags. And CODE 1 that wont display the text in its right position, not on top of the image, instead it shows it way down, like so: http://img196.imageshack.us/img196/2625/frustration.jpg So finally... i discovered, why.. the Gods have put me in this misfortune. Google Mail is in BETA, and that means the following: Quote: Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software. Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed. As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email. For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded. &#^&%$@3(*(2@#*&y#!!............................. Why Now all my work ive put into this could be all for nothing,.. since I believe the solution given by the website is too far fetched for this amateur. The solution: Quote: Here are coding techniques that appear to work well in Google Mail and older email softwa * Define the background color in a TD cell with bgcolor=, not the CSS style. * Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. * If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work. * If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag. * If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag. * If the P and A fonts appear to be different sizes, wrap the A tag in a P tag. * Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges. * When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly. SOURCE I need either of these two amateuristic codes (they are basically the same) re-coded with the rules up above. Could anyone who can do this fluently without breaking a sweat help me out? I am near desperation and willing to transfer a fee to whatever paypal account. I just need this mail template sent out asap. Thank you for reading. CODE 1: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
width:711px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
background-image:url(blokje.png);
}
#pic {
display:block;
}
#content {
padding:0 0 60px 50px;
background-image:url(onderkantcurve.png);
background-repeat:no-repeat;
background-position:0 bottom;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="top.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
CODE 2: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
position:relative;
width:711px;
height:910px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
}
#pic {
position:absolute;
top:0;
left:0;
}
#content {
position:absolute;
top:170px;
left:50px;
width:651px;
height:680px;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="big.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief Februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
Thanks for reading.. Ok, currently on my site I have a bookmark link in my navigation bar (link is in my signature, also looking for reviews if you care to). However, I'm uncertain whether or not they really are worth it. I'm a self taught hobbyist webmaster so I'm not really "in the know" when it comes to some things. I'm just wondering, do bookmark links increase the frequency of people bookmarking your page? Do they just look like extra spam? I don't think I will keep mine up... it seems like even with it there it only works for IE and not mozilla or opera anyways. Hi, Currently my website is valid XHTML but I am planning on re coding the whole thing. I wanted to use HTML because to me it's a little easier and more basic. If I just start out with the html and head tags and no DOCTYPE and use the basic tags...do you think it would still work ok? I just dont want to go through the whole validation thing. I know other sites who use plain HTML without validating and their site works fine. Also I was wondering if it matters about uppercase tags? like < HTML > and < A > or < a > does caps make any difference? I guess I should probably just try it and then test it on major browsers to see for myself. Any advice would be appreciated! I just want to use plain HTML without worrying about validation....but I also want to make sure that people can use it on all different monitor sizes and browsers (at least all major browsers). I know thats the whole point of validation, but pretty much my question is: if I use plain HTML tags, including deprecated ones such as the < font > tag if it would still be usable on major browsers? I'm wondering because I've noticed that even though the W3C claims they are deprecated, some of them still work anyways? Sometimes I wonder if the W3C is right about that? Thanks! Ok I have used one of these social bookmarking generators to make links to add to del.icio.us and other sites but the links don't validate. Look: HTML Code: <ul> <li><a href="http://del.icio.us/post?url=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">del.icio.us</a> </li> <li><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=Johnsons Roofing LLC&u=http://johnsonsroofingllc.com">Yahoo MyWeb</a> </li> <li><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">Google</a> </li> <li><a href="http://www.stumbleupon.com/submit?url=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">StumbleUpon</a> </li> </ul> How do I make this valid? Hey there, Could anyone please explain why it tells me that it is not a valid doc type, Well that is what it says here http://validator.w3.org/check?verbos...iplayer.com%2F The actual site is http://www.online-multiplayer.com Thanks in advance for any help. While in class today our instructor was covering a very controversial topic about why do you think that it is important for an XHTML document to valid? Well-formed? Personally I always do my best to make sure a document is true to the doctype listed. But, I don’t agree on the importance of maintaining an absolute (100% valid) doctype. I think accessibility comes first. While designing a website I have always took into account disabled visitors whom are dependent on screen readers or other services. Which may prevent them from navigating or understanding the content in a traditional manner that you and I take for granted. To me a well formed document is the cardinal rule. What is your opinion on this? Im having problems making my site valid the error is below This page is not Valid HTML 4.01 Transitional! Result: Failed validation, 1 Error if i put in the tr the format/layout goes a miss is there anything i can do? Line 36, Column 3: start tag for "TR" omitted, but its declaration does not permit this . <td><!--- middle (main content) column end --> code 35 <table id="container"> 36 <td><!--- middle (main content) column end --> thanks alot |
|||||||