Try not to give up! You don’t need to know CSS or PHP to construct a favored site. Some great old HTML and knowing how to reorder will do. Here are the cool HTML codes to copy.
I have collected 7 important templates. They will improve the functionality and client experience of your site, while not using up every last cent. What’s more, they may contain some CSS and PHP as well. So you can use the Html Code You Can Use To Make Your Website Stylish. Although, there are many websites from where you learn to code to create a website.
Perhaps one of these is the thing that you’ve been searching for.
-
Parallax Effect
In today’s web design trends, parallax scrolling is in demand. In the parallax effect, you can create a 3d effect when you scroll. In which the background image moves with the foreground at a slower rate. Which creates a nice effect on users.
-
Scrollable Text Box
This is a basic however accommodating HTML element that gives you a chance to pack long scraps of text into a conservative organization. Thusly it doesn’t take up the whole space on the page.
HTML input:
<div style=”width: 25%; stature: 50px; flood: auto; scrollbar-confront shading: #CE7E00; scrollbar-shadow-shading: #FFFFFF; br/scrollbar-highlight-shading: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-shading: #6F4709; br/scrollbar-track-shading: #FFE8C1; scrollbar-bolt shading: #6F4709;”>Your text will appear here. You simply need to include an adequate measure of text to make the scrollbars appear. Clearly, this isn’t enough,o we should accept we have somewhat more to state. In the end, the scrollbars will prove to be useful. That is it! :)</div>
-
Using Highlight Text
Using tag <span> you can generate different effects for your text on the website. But these tags will only work when your website opens in the browsers like Google Chrome or Mozilla Firefox.
Input:
<span style=”background-color: #FFFF00″>Your highlighted text here.</span>
Adding Text with background image
Using the above step you can set text with the background image. This one just turns out to be extremely energizing if your text has a sufficiently major size, which is the reason I likewise expanded the text dimension.
Input
<span style=”background-image: URL(//static.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt”>MakeUseOf presents…</span>
Note that you could likewise include the style and textual style elements to a <strong> tag for a similar effect, in addition to bolded text.
Suggested:
How to Become a WordPress Developer?
-
Title Tooltip
A title tooltip is used when you want to see text on images after hovering the mouse on the image.
Input
<span title=” See, this is the tooltip. :)”>Move your mouse!</span>
-
Make Scrolling or Falling Text
When you look for “marquee HTML” on Google, you’ll find a little Easter Egg. This effect is drawn using an old marquee tag. While this HTML include has been censured, most program still helps it. You can also use HTML website templates to make your work easier.
Information:
<marquee>Make it scroll!</marquee>
-
Include a Switchmenu
The most energizing HTML effects are dynamic HTML effects. Be that as it may, they are frequently content-based. Here is one effect for menus that I have come to revere. It’s somewhat more confounded than your average HTML tag since it works with a template and contents. The preferred standpoint is that you don’t need to transfer a CSS or content document to influence it to work, you can plant all vital data into the <head> segment of your site.
Input:
Include the accompanying code into the <head> area of your page:
<style type=” text/css ”>
.menutitle{
cursor: pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align: center;
font-weight: bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
</style><script type=”text/javascript”>/***********************************************
* Switch Menu script- by Martial B of https://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit https://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu=”yes” //”yes” or “no”. Make sure each SPAN content contains an incrementing ID starting at 1 (id=”sub1″, id=”sub2″, etc)
var persisttype=” sitewide” //enter “sitewide” for the menu to persist across the site, “local” for this page only if (document.getElementById){ //DynamicDrive.com change
document.write(‘<style type=”text/css”>n’)
document.write(‘.submenu{display: none;}n’)
document.write(‘</style>n’)
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById(“masterdiv”).getElementsByTagName(“span”); //DynamicDrive.com change
if(el.style.display != “block”){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className==”submenu”) //DynamicDrive.com change
ar[i].style.display = “none”;
}
el.style.display = “block”;
}else{
el.style.display = “none”;
}
}
}function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu==”yes”){
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=””)
document.getElementById(cookievalue).style.display=”block”
}
}function savemenustate(){
var inc=1, blockid=””
while (document.getElementById(“sub”+inc)){
if (document.getElementById(“sub”+inc).style.display==”block”){
blockid=”sub”+inc
break
}
inc++
}
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid
document.cookie=cookiename+”=”+cookievalue
}if (window.addEventListener)
window.addEventListener(“load”, onloadfunction, false)
else if (window.attachEvent)
window.attachEvent(“onload”, onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu==”yes” && document.getElementById)
window.onunload=savemenustate</script>
This code goes wherever you need the dynamic menu to show up.
<!– Keep all menus within masterdiv–>
<div id=”masterdiv”><div onclick=”SwitchMenu(‘sub1’)”>Topics</div>
<span id=”sub1″>
– <a href=”//www.makeuseof.com/service/browser”>Browsers/Addons</a><br>
– <a href=”//www.makeuseof.com/service/web_based”>Web Apps</a><br>
– <a href=”//www.makeuseof.com/service/how-to”>How-To Tips</a><br>
– <a href=”//www.makeuseof.com/service/applications”>Cool Software</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub2’)”>Staff Writers</div>
<span id=”sub2″>
– <a href=”//www.makeuseof.com/tag/author/karl-l-gechlik/”>Karl Gechlik</a><br>
– <a href=”//www.makeuseof.com/tag/author/tinsie/”>Tina</a><br>
– <a href=”//www.makeuseof.com/tag/author/varunkashyap/”>Varun Kashyap</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub3’)”>Miscellaneous</div>
<span id=”sub3″>
– <a href=”//www.makeuseof.com/about/”>About</a><br>
– <a href=”//www.makeuseof.com/contact”>Contact</a><br>
– <a href=”//www.makeuseof.com/archives-2″>Archives</a><br>
– <a href=”//www.makeuseof.com/disclaimer”>Disclaimer</a><br>
</span></div>
In conclusion:
Developing a visually appealing website doesn’t have to be a hard task. With some knowledge of HTML coding and the ability to copy and paste, everybody can improve the functionality and user ride of their website. You can easily learn more about how you can improve the appearance of your site on your own, for this you just need to study relevant articles attacking this, for example: https://andersenlab.com/services/web-development, also check out the blogs of famous programmers and their YouTube channels.
This article presents 7 different HTML codes that can be used to add various effects to a website. These include a parallax effect, a scrollable text field, highlighted text, text with a background image, a title tooltip, scrolling or drop-down text, and a toggle menu. The article emphasized that these codes can be used without any knowledge of CSS or PHP and can be implemented at a low cost. In general, the use of these HTML codes can be a great way to improve the appearance of your website.”
Suggested:
How To View Source Code And Its Importance?
5 AI tools to automate your Facebook Ad Campaigns
Very nice and helpful code. I applied this code on my website.
hi
Very difficult coding for me. any easy way?
thanks
Hi Bilal,
You can use a CMS like WordPress if you do not like coding.
Thanks for sharing this tips tricks with us, expecting a more informative post from you
Hii Sunny,
Thanks for sharing 7 cool HTML code with, great information. Pretty cool indeed
Pretty cool indeed Sunny. The switch menu sounds fascinating.