Being a developer we all want to display attractive things to the user, that must be useful also. In this article, we will discuss such tricks that will make your development enjoyable. All the tricks are described below with the proper example.
HTML top 5 tricks and tips:
-
The color picker: This tricks is for color picker in the input tag, you can place “type” property with the value of “color” to act the input field as a color picker.
-
Example:
-
Example:
html
<!DOCTYPE html><html>
<head>
<title>Color picker in input field</title>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Color picker in input filed: </b>
<input type="color">
</div>
</body>
</html>
|
- Output:
-
The document refresher: This tricks is for refreshing the document automatically after mentioned time. It is used when inactivity effect on your web-site. By using http-equiv= “refresh” property, we can define the time for the refreshment also in the content property.
-
Example:
-
Example:
html
<!DOCTYPE html><html>
<head>
<title>Document Refresher</title>
<meta http-equiv="refresh" content="10">
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Document will refresh after 10sec</b>
</div>
</body>
</html>
|
- Output:
-
Theme color changer: This tricks is for changing the theme color of your website, by using the name=”theme-color” property, but we have to define the color code in the content property. This will change the color of the header bar and address the bar in the newest Chrome version on the Lollipop of android.
Note: This will only work on mobile devices(Lolipop).-
Example:
-
Example:
html
<!DOCTYPE html><html>
<head>
<title>Theme color changer</title>
<meta name="theme-color" content="#26F809">
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Theme color changer</b>
</div>
</body>
</html>
|
-
Icon adder: This tricks is used to add icons on the place of favicon. You just need a path for the source file. Include the link tag inside of the body tag, this will place an icon on your favicon place.
-
Example:
-
Example:
html
<!DOCTYPE html><html>
<head>
<title>Icon adder</title>
<meta name="theme-color" content="green;">
<link rel="icon" href="/icon.ico"
type="image/x-icon"/>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Icon adder</b>
</div>
</body>
</html>
|
- Output:
-
Voice recognition: This tricks is used to add voice search in the input field. Like Google search, it searches on by voice recognition.
Note: This will only work on mobile devices(Lolipop only Google Chrome).-
Example:
-
Example:
html
<!DOCTYPE html><html>
<head>
<title>Voice recognition</title>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Voice recognition</b>
<input type="text" x-webkit-speech>
</div>
</body>
</html>
|