13 Cool Tricks For HTML
You may not have trained in graphic design or the art of user experience, but that doesn't mean you cannot design and build websites or blogs that look good and are a pleasure to visit. With HTML, CSS3 and JavaScript, you have a lot of simple tools at your disposal to make your website or blog look attractive, user-friendly and modern. HTML5 has made a huge contribution to the gorgeous websites being designed everyday.
A little intuition, empathy, and testing - along with some cool HTML tricks - will help you get there too!
1. Tableizer
This one is not really an HTML trick since Tableizer is an external app. But it's great for building HTML tables out of data, using existing Calc or Excel spreadsheet templates. You only have to paste your cells into the Tableizer, and it will generate an HTML code snippet to paste into your website code. The result is a neat table where you can edit details like background colors to customize.
2. Map images
Image maps are cool images with clickable areas that you can link to other parts of the document, or other web pages. Not everyone may be aware that the <map> element will let you define the areas on an image that a visitor can click. Simply mention the corresponding X Y coordinates in the <area> elements inside <map>.
An example of this feature would be a world map that would take visitors to the different regions where your business has a presence.
You can only style markers directly on the image in image editing software.
Here is an example code:
<h1 style="text-align:center;">The 7 Continents</h1>
<h4 style="text-align:center;">➤ Click on the dots in the image to go to a continent section</h4>
<map name="continents_map">
<area shape="circle" coords="70,70,10" href="#north_america">
<area shape="circle" coords="133,185,10" href="#south_america">
<area shape="circle" coords="270,137,10" href="#africa">
<area shape="circle" coords="292,44,10" href="#europe">
<area shape="circle" coords="469,201,10" href="#australia">
<area shape="circle" coords="374,65,10" href="#asia">
<area shape="circle" coords="340,267,10" href="#antartica">
</map>
<figure style="text-align:center;">
<img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />
<figcaption>World Map</figcaption>
</figure>
<div>
<h3 id="africa">Africa</h3>
<p>Our locations in Africa</p>
</div>
<div>
<h3 id="asia">Asia</h3>
<p>Our locations in Asia</p>
</div>
<div>
<h3 id="europe">Europe</h3>
<p>Our locations in Europe.</p>
</div>
<div>
<h3 id="south_america">South America</h3>
<p>Our locations in South America.</p>
</div>
<div>
<h3 id="north_america">North America</h3>
<p>Our locations in North America:</p>
</div>
<div>
<h3 id="antartica">Antarctica</h3>
<p>Our locations in Antarctica.</p>
</div>
<div>
<h3 id="australia">Australia</h3>
<p>Our locations in Australia.</p>
</div>
The accompanying CSS code can be:
body {
font-family: "bookman old style";
}
:target {
color: lightyellow;
background: indianred;
}
h3,
h1 {
color: indianred;
}
img {
border: 3px dashed indianred;
}
body {
counter-reset: srl;
}
h3::before {
counter-increment: srl;
content: counter(srl)". ";
}3. Allow visitors to change background or text color
A little extra bit of code will allow your visitors to choose their own text and background color. It's impossible for you to please everyone with your color choices, so using this trick will be an excellent case of pleasing all of the people, all of the time.
Here's the code you will need:
<select name=”clr” onchange=”document.bgColor=this.options[this.selectedIndex].value” size=”1″>
<br>
<option value=”black”>black
<option value=”orange”>orange
<option value=”flamingred”>fuschia
<option value=”lightyellow”>light yellow
<option value=”green”>green
<option value=”cyan”>cyan
<option value=”yellow”>yellow
<option value=”red”>red
<option value=”white”>white</option>
</select> Background Color
<br>
<select name=”clr” onchange=”document.fgColor=this.options[this.selectedIndex].value” size=”1″>
<br>
<option value=”black”>black
<option value=”orange”>orange
<option value=”flamingred”>fuschia
<option value=”lightyellow”>light yellow
<option value=”cyan”>cyan
<option value=”yellow”>yellow
<option value=”red”>red
<option value=”white”>white</option>
</select> Text Color4. Add MetaData
Be seen on Google's searches and other search engine searches by making sure that you have provided meta data about your website. In fact, it is no longer an option, but essential if you want to stay neck on neck with your competition.
Don’t forget to optimize the rest of your website content for users on search engines to find you easily. SEO pros at Freelancer can help you with your back-end SEO and search engine marketing (SEM) needs.
Meanwhile, the code for adding meta is simple:
<meta name=”description” content=”Used auto parts for sale”>
<meta name=”keywords” content=”fuel filters, brake discs, belts” />5. Hide Field
Reddit warriors have pointed out this example of "programming horror" in which a field for internal use is visible for the public to see.
This form is an example of amateurish programming, and you don't want such an oversight on your website. HTML gives you the option to hide fields. The visitor can't type anything into a hidden field, and when the visitor submits the form, the form carries the hidden field.
Here's how it works:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="contact" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<br><br>
</div>
</form>
</body>
</html>
From the code above, the resulting output will be a hidden field that visitors will not be able to see. The hidden field here will tell the form handler the users preferred English.
6. Add a horizontal line
A horizontal line to break up long sections of your website will make the page easier on the eye. To add the line, use the <hr/> tag, as in:
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>7. Input suggestions
You can make it easier for visitors to find what they're looking for by bringing up a list of suggestions when they're typing input values. Use the following code:
Type your favourite text editor:
<input type="text" list="text_editors">
<datalist id="text_editors">
<option value="Atom"></option>
<option value="Notepad ++"></option>
<option value="Sublime Text"></option>
<option value="Wordpad"></option>
</datalist>
<p><em>For example;
</em> Sublime Text</p>8. Highlight text
The <span> tag will let you add highlights to text on both Firefox and IE. You can choose the color of the highlight, of course. The code is simple:
<span style=“ background-color: #FFFF00”>Your text here.</span>9. Add background image to text
You can add a background image instead of a highlight to your text if the font is large enough. We recommend not using this tip for fonts smaller than 20 pts, or there won't be much of a difference between the image and a background color. The code is:
<SPAN STYLE=”background-image: url(//www.myimage.png ); font-size: 20pt”>NoBoringHighlight…</SPAN>10. Add fine print
Add legal rights, citations, restrictions, terms and other fine print at the bottom of your document with the <small> tag.
<h1>Black Friday Sale!!! Upto 70% off on all products under <i>Toys & Recreation</i><sup>*</sup></h1>
<p><small>* Terms and Conditions apply</small></p>11. Color Picker
With HTML5, there are some really interactive customizations that visitors to your website will like. The color picker will need a little JavaScript coding and CSS to let you choose what color you want from a palette rather than having to enter an abstract color code. This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.
The code can be something like this:
<!--HTML--> Choose a color to color the below text <input id="color_picker" type="color" onchange="showHex();"> <span id="color_hex_value"></span> <h1>COLOR ME !</h1> <!--CSS--> body {
font-family: "bookman old style";
}
<!--JS--> function showHex() {
var hex document.querySelector("#color_hex_value"), h1 document.querySelector("h1");
h1.style.color document.querySelector("#color_picker").value;
}12. Add voice recognition
In HTML5 and later, you can add speech recognition to a text input, and it's as simple as:
<input type="text" x-webkit-speech />13. Insert math equations
Inserting math equations (using the MathML language) is super simple in HTML5 and later. Put all your equations between the tags <math> and </math>.
This code will insert a fraction 'a/b' to your page:
<math>
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
</math>
There are as many as 142 HTML elements that the W3C has standardized for your use. HTML5 has given us exciting features to make our websites as user-friendly and media-rich as possible, with support for video formats and canvas, among other things.
What do you think about the HTML features on this list? Have you used any of them before? Are there any cool features you think should be on our list? Let us know in the comments below.
No comments:
Post a Comment