Hello Friends I am beginner person in creating simple static sites. I created a website and i show that sites to my frineds and they all are says "your html coding is not right improve it". I am totally confused what should i do to improve it. Check my site it is new and not completed just for demo :- a1webtechsolutions.com please see my sites and tell me how i can make more effective. Help meeeeee Friendssssssssssssssssss
Have you asked them what they said was wrong with your site? It is a very vague statement to just say someones HTML is wrong.
This is from the w3 validator, this is just the starting, you will get a lot more as you start coding. http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/ http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
Uh.. First of all, get a good color combination... Make it look elegant... like dark grey with a sky blue or white with saffron like on Indian eWorld.. Let there be more space between lines and blocks... Colors and font are the main things that actually decide the looks in a big way..
The validator tells whether the code is valid (hence validator) - whether it contains syntax errors or not, and not if it is GOOD. That being said, either learn or hire someone who can write good code. But before that, fix that design of yours. You've got some bad color contrasts, black text on dark blue background is not ideal.
Well... lemme give you a list of what's wrong: See this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Code (markup): Transitional -- means you are in 'transition' from 1997 to 1998 coding practices; it's basically bragging "hey, this website is built with decade and a half out of date methodologies" See this? <div class="black"><br /> Code (markup): "Black" is a PRESENTATIONAL name, it doesn't describe what the element IS or WHY it is black -- likewise you are using a line-break to do padding's job. Likewise... See this? <div class="text"><font size="+2"> Code (markup): "text" is also pointlessly vague, and the FONT tag? That is a presentational tag that has ZERO BUSINESS on ANY website written after 1998! See these? Code (markup): Complete waste of bloated markup to do either align or float's job. See this? <hr align="center" color="#FFFFFF"/> Code (markup): inlined presentation, neither the ALIGN attribute on HR or the COLOR attribute on ANYTHING have the least bit of business on any website written after 1998! See this? <marquee class="html-marquee1" direction="up" behavior="scroll" scrollamount="1" > Code (markup): Marquee is a non-standard presentational tag that, well... at this point do I even need to say it? See this? <p class="pl">Latest News</p> Code (markup): What the blue blazes makes two words a grammatical paragraph?!? Those are quite obviously headings, why aren't you using numbered headings? <h1>Seo in Delhi</h1> Code (markup): ... and NOW you get to a numbered heading, so far past where you should have had your first H1 it's ridiculous. An H1 is the heading under which all sections of the page are SUBSECTIONS, as such what is most likely to be the 'proper' heading for logical heading orders would be the stuff you have in the outdated FONT tag up at the top. "SEO in Delhi", "Special Offer" and "Latest News" all being H2 structurally. See this? <table align="center" width="910" border="0" height="150"> <tr align="center"> <td>Internent Marketing Services</td> <td>Web Designing & Development</td> <td>Our Packages</td> <td>Contact us</td> <td></td> </tr> Code (markup): Tables for layout like it's still 1997... with attributes that again have NO business being used in any website written after that time. Really I think most of your problem is you are learning or learned from a horiffically outdated source. You are NOT using semantic markup (saying what things ARE) and instead seem to be using tags for what they look like by default -- which is NOT how it's done anymore. (...and should NEVER have been done in the first place -- you can thank HTML 3.2, Microsoft and Netscape for that!) What you really need is semantic markup, and to axe the late '90's style animooted nonsense like the marquee. That **** does nothing to enhance the page's functionality no matter how flashy it is. Likewise until you have a firm grasp on making a functional accessible clean semantically marked up site, do the world a favor and stay away from the pointless bloated garbage like jQuery. To give you an idea what I mean, without removing the bits I would NOT put on a website in the first place like the image rotator up top and the slider near the footer, it would go something more like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> A1 Web Tech Solutions </title> </head><body> <div id="pageWrapper"> <ul id="mainMenu"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="seopackages.html">Seo Packages</a></li> <li><a href="contactus.html">Contact us</a></li> <li><a href="enquiry.html">Enquiry</a></li> </ul> <h1>A1 Web Tech Solutions</h1> <div id="contact"> Contact to Lalit +91-8802747076<br /> +91-8588838586, +91-9911376883 <!-- #contact --></div> <div id="slider"> <a href="#/javascript-image-slider"> <img src="images1/slide1.jpg" alt="Welcome to A1 Web Tech Solutions" /> </a> <img src="images1/slide2.jpg" alt="Web Designing" /> <img src="images1/slide3.jpg" alt="Domain Registration & Hosting" /> <img src="images1/slide4.jpg" alt="Web Development" /> <img src="images1/slide5.jpg" alt="Mobile Applications" /> <img src="images1/slide.jpg" alt="Full Sataisfaction" /> <!-- #slider --></div> <div id="contentWrapper"><div id="content"> <h2>Seo in Delhi</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit sit amet turpis vel lobortis. Donec posuere risus ut arcu elementum, id mattis metus interdum. Mauris commodo luctus vehicula. Nunc auctor augue eget nulla congue, sit amet tristique eros facilisis. Fusce eu auctor justo, vel mattis lacus. Vivamus mollis blandit sapien non vulputate. Quisque consequat, nulla non sodales pulvinar, lectus elit molestie enim, vel hendrerit risus erat blandit erat. Nulla tempus lorem justo, vel laoreet libero condimentum id. Donec urna neque, posuere elementum mollis in, consequat vel lectus. </p><p> Curabitur eu mauris in nisi iaculis sagittis. Etiam malesuada nisi turpis. Ut justo augue, suscipit at odio vitae, facilisis ullamcorper eros. Quisque lacinia neque nisl, ac ultricies tellus lacinia a. Vestibulum metus lorem, posuere lobortis rutrum in, sagittis ac elit. Vestibulum dapibus vestibulum tincidunt. Sed eros nibh, sagittis eget mi vel, tincidunt mollis sapien. Sed aliquam pharetra accumsan. Donec mi lacus, ultricies ac vulputate placerat, cursus a nisl. Integer non metus vel ligula suscipit feugiat vitae vitae lacus. Duis id sollicitudin ante, a ultricies est. </p><p> Nullam non diam tempus, vulputate purus ut, mollis neque. Cras odio libero, sollicitudin in sem eget, dapibus porta leo. Maecenas pretium id velit ut scelerisque. Praesent in neque pretium purus dapibus consequat eu dictum diam. Aliquam eget leo ullamcorper, elementum mi quis, suscipit lectus. Aliquam erat volutpat. Sed accumsan turpis imperdiet elit aliquet, ultricies facilisis felis dignissim. Nunc ut faucibus massa. Morbi augue massa, dictum non orci vitae, lacinia fringilla massa. Duis vehicula tempus sem, et consequat quam pretium eu. Mauris semper blandit neque, ultrices ultrices arcu facilisis a. Fusce nec nibh eget massa fringilla imperdiet nec sit amet mauris. Mauris iaculis facilisis nibh. Vivamus gravida tempus ornare. Curabitur placerat imperdiet vulputate. Sed eget nulla neque. </p> <!-- #content, #contentWrapper --></div></div> <div id="extras"> <div class="subSection"> <h2>Special Offer</h2> <p> Put some sort of special deal here... </p> <!-- #subSection --></div> <div class="subSection"> <h2>Latest News</h2> <ul> <li>Short news item description and link</li> <li>Short news item description and link</li> <li>Short news item description and link</li> </ul> <a href="#" class="more">More News</a> <!-- #subSection --></div> <!-- #extras --></div> <div id="slides"> <img src="images1/img1.jpg" alt="describe this!" /> <img src="images1/img2.jpg" alt="describe this!" /> <img src="images1/img3.jpg" alt="describe this!" /> <img src="images1/img4.jpg" alt="describe this!" /> <img src="images1/img5.jpg" alt="describe this!" /> <img src="images1/img6.jpg" alt="describe this!" /> <img src="images1/img7.jpg" alt="describe this!" /> <img src="images1/img8.jpg" alt="describe this!" /> <!-- #slides --></div> <!-- #pageWrapper --></div> <div id="footerWrapper"> <div id="footer"> <div class="subSection"> Internent Marketing Services<br /> SEO Service<br /> Social Media Optimization<br /> Link Building Services<br /> PPC Services<br /> E-commerce Services<br /> OutSource SEO Services <!-- .subSection --></div> <div class="subSection"> Web Designing & Development<br /> Website Designing<br /> Website Development<br /> Content Management System<br /> Application Development<br /> E-Commerce Solutions<br /> Moblie Website Designing <!-- .subSection --></div> <div class="subSection"> Our Packages<br /> SEO Packages<br /> Link Building Packages<br /> SEO Packages<br /> PPC Packages <!-- .subSection --></div> <div class="subSection contactUs"> Contact us<br /> +91-8802747076<br /> +91-9911376883<br /> webmaster.lalitji@gmail.com<br /> rajivkmr336@gmail.com<br /> website- www.a1webtechsolutions.com <!-- .subSection --></div> <!-- #footer --></div> <a href="#">Sitemap</a> | <a href="#">ROR</a><br /> Copyright @ www.a1webtechsolutions.com <!-- #footerWrapper --></div> </body></html> Code (markup): Everything else would either end up in the CSS, or not at all. Notice the paragraphs around grammatical paragraphs, logical use of numbered headings, and in general around two-thirds the markup. Even fixing your markup though you've got issues like illegible color contrasts (black on blue), an inaccessible fixed-width layout (which encourages inaccessible trash like that perfect width image slideshow up top), layout that tends to fall apart at different default font-sizes (from your using automatic sizing without understanding them), inaccessible illegibly small px metric fonts in certain locations, so on and so forth. I wish I could recommend a good source to learn from, but right now they've all been drying up as this HTML 5 asshattery is taking over. If you can find a copy, the 1st or 2nd edition of Ian Lloyd's "HTML and CSS the Right Way" from Sitepoint books is a good place to start -- don't even BOTHER with the steaming pile of manure known as 3rd edition, since it's hopped on the HTML 5 bandwagon pissing away any useful or meaningful.
I have tried to check your problem but can not able to open your website. But still you can visit web development websites and get idea where the problems is and from where you are going in wrong way. But still I am here so you can contact me anytime, I will surely help you to solve your queries.
Since your link is not working i guess your friends must be suggesting you about look and feel of website. Please take a look at http://digitalmarketingprofs.com/course/html-course-for-beginners for basic undersatnding of HTML. hope it helps.
Specially Thanks Deathshadow to guide me... i was totally confused when i posted my problem here... but as you described so i easily understanding how i can do.. once again thanks man........
Just do one thing download Dreamweaver Software into your PC or laptop, this software helps you to create good website
I learned HTML through TheNewBoston's Video tutorials, I suggest you start there as well http://thenewboston.org/list.php?cat=40