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" height="0">
<param name="movie" value="the_flash_file.swf" />
<param name="quality" value="high"/>
</object> - HTML Table Markup
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table> - 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> - 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> - 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> - 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> - 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" />
- 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" />
- Open link in new window
<a href="http://google.com" target="_blank">This link will open in new window/tab</a>
No comments:
Post a Comment