Cool HTML Tricks
HTML trick no. 1 – Clear form input
If you want to provide a visitor a possibility to easily clear his or her input in a form, you just need to add a required button. This line does it all:<input type=”reset” value=”Clear”>
HTML trick no. 2 – Add spacing
To add spacing between certain items, add one or more non-breaking space special characters: . In the following example there are 4 non-breaking spaces between the circle and the square:
<img src=”circle.png”/> <img src=”square.png”/>
<img src=”circle.png”/> <img src=”square.png”/>
HTML trick no. 3 – Set character encoding
If you use non-ASCII characters, you should set character encoding in order to display those characters properly. The most commonly used encoding is UTF-8. You have to add the following code into the head section of a document:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
Make sure that the document itself is also saved in UTF-8 encoding.
HTML trick no. 4 – Get found!
In order to be more visible to search engines, you should provide some meta data about your site. For example, if you have a web site for selling car parts, you should add meta data somewhat like this:
<meta name=”description” content=”Car parts for sale”>
<meta name=”keywords” content=”fuel filters, brake discs, belts” />
HTML trick no. 5 – Redirect visitor
If you want to redirect the visitor to another URL, for example 5 seconds after accessing your page, add the following line to the head section:
<meta http-equiv=”REFRESH” content=”5;url=http://www.the-domain-you-want-to-redirect-to.com”>
HTML trick no. 6 – Encode URL
If you want to link to a document or file which’s path contains non-ASCII characters, you should “URL encode” Check this link out for the complete reference: http://www.w3schools.com/tags/ref_urlencode.asp
HTML trick no. 7 – Add voice recognition (HTML 5)
If you want to add speech recognition to a text input in a HTML5 document, just insert the following line:
<input type = "text" x-webkit-speech />
HTML trick no. 8 – Insert math equations (HTML 5)
HTML5 supports adding math equasions using MathML language. The just have to be between the tags: <math> and </math>. For example, to insert a fraction x/y use the following code:
<math>
<mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>
</math>
HTML trick no. 9 – Insert a SVG image (HTML 5)
HTML5 supports adding SVG (Stored Vector Graphics) images to documents. The just have to be between the tags: <svg> and </svg>. For example, to add a circle to a document use the following code:
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle id=”redcircle” cx=”50″ cy=”50″ r=”50″ fill=”red” />
</svg&
.jpg)
No comments:
Post a Comment