enavu webdevmania tutsvalley psdestination
visit the enavu network
15 Comments Article Title Overlay

Top 10 HTML Snippets

The 10 most used snippets in HTML. Very useful reference for any Web Developer.

Some of these you are probably familiar with, but some of them you just can’t always remember off the top of your head. So I deicided to make a reference place.

Comments in HTML
<!– this is a comment in html –>

Embed Flash
<object type=”application/x-shockwave-flash”
data=”the_flash_file.swf”
width=”0″ [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

The 10 most used snippets in HTML. Very useful reference for any Web Developer.

Some of these you are probably familiar with, but some of them you just can’t always remember off the top of your head. So I deicided to make a reference place.

  1. Comments in HTML
    <!-- this is a comment in html -->
  2. Embed Flash
    <object type="application/x-shockwave-flash"
    data="the_flash_file.swf"
    width="0" height="0">
    <param name="movie" value="the_flash_file.swf" />
    <param name="quality" value="high"/>
    </object>
  3. HTML Table Markup
    <table>
    <thead>
    <tr>
    <th></th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
  4. Form HTML Elements
    <form id="form_id" action="" method="post">
    <fieldset>
    <legend>The Form</legend>
    <div>
    <label for="text_field">Text Field</label>
    <input type="text" id="text_field" name="text_field" />
    </div>
    <div>
    <label for="password_field">Password Field</label>
    <input type="password" id="password_field" name="password_field" />
    </div>
    <div>
    <label>Radio Buttons</label>
    <input type="radio" name="button" value="1" /> Button 1 <input type="radio" name="button" value="2" /> Button 2
    </div>
    <div>
    <label for="checkbox">Checkbox</label><input type="checkbox" name="checkbox" id="checkbox" value="checkme" />
    </div>
    <div>
    <label for="select_choice">Dropdown:</label>
    <select name="select_choice" id="select_choice">
    <option value="Choice 1">Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
    </fieldset>
    </form>
  5. HTML5 Page Structure
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your Website</title>
    </head>
    <body>
    <header>
    <nav>
    <ul>
    <li>Your menu</li>
    </ul>
    </nav>
    </header>
    <section>
    <article>
    <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </article>
    <article>
    <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </article>
    </section>
    <aside>
    <h2>About section</h2>
    <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </aside>
    <footer>
    <p>Copyright 2009 Your name</p>
    </footer>
    </body>
    </html>
    
  6. Embed Code for Quicktime
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
    width="200" height="16">
    <param name="src" value="movie.mov" />
    <param name="autoplay" value="true" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <param name="controller" value="true" />
    <!--[if !IE]> <-->
    <object data="movie.mov" width="200" height="16" type="video/quicktime">
    <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
    <param name="controller" value="true" />
    </object>
    <!--> <![endif]-->
    </object>
  7. Embed code for Windows Media
    <object type="video/x-ms-wmv"
    data="movie.wmv"
    width="320" height="260">
    <param name="src"
    value="movie.wmv" />
    <param name="autostart" value="true" />
    <param name="controller" value="true" />
    </object>
  8. Meta RedirectThis allows you to redirect the page using meta tag. Setting content to 0 for immediate redirect.
    <meta content="5;url=http://redirectto.com/" http-equiv="refresh" />
  9. Force IE8 to render as IE7 (meta)This code will force IE8 to render your page as IE7.
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
  10. Open link in new window
    <a href="http://google.com" target="_blank">This link will open in new window/tab</a>
DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. 7 Amazing Presentation Slides to Teach you How to Code with jQuery
  2. Expression Engine Introduction Video Series – Day 1
  3. Expression Engine Introduction Video Series – Day 2
  4. jQuery for uttermost beginners (video)
  5. 10 Awesome jQuery and JavaScript Snippets

Did you absolutely LOVE this article... share it!

Comments

  • nive nice

  • i disagree with the mint website green comment. it looks like its an eco site. i only knew it had anything to do with money due to the word ‘money’ being in the header :(

  • With exception to the last two (just my opinion), this is a very inspired collection of site designs that run the gamut from simple and sleek to harmoniously colorful. Thanks for sharing your thoughts.

  • Why concentrate on the home/main page only?

    Surely the design of the sub-pages are more important to the user.

  • Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
    Jumping Castle

  • I wouldn’t necessarily call these the most influential web designs (besides apple maybe), but it is definitely a nice collection with well-thought comments.

  • What I don’t understand is why a site like yours, one focused on web design doesn’t do better spam protection. One look at the comments above and I can tell at least half of them are spammy.

    At the very least you should add ‘nofollow’ to the links so google doesn’t penalise you.

  • What a well written great piece of information. I remember that I was looking for something like this from a couple of months. I am glad that I found my way here by coincidence!
    placemats

  • Really its an great kind of resource for the users including me and more stuff because of the simple designs and thanks for the information…

  • Very interesting as well as informative post.Thanks for providing for us.I read your article with my pleasure.
    wedding stubby holders

  • Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
    stubby holders

  • Nice article. Thanks for sharing!

  • Like step 2, that is going to cut down on the coding, should make the page with flash run faster as well with less code, thanks alot.

  • Thats really great, and you are right we normally forget many syntax and then looking for ref. guide. I will keep this handy.

    And I like your style of coding it is simple, clean and to the point. And of course well commented. Thanks for the quality work and for sharing that with us.

    Ayub

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting