আপনি নিজের ওয়েবসাইটটি দুর্দান্ত দেখতে চান — তবে আপনার ওয়েব বিকাশের দক্ষতার অভাব রয়েছে।
হতাশ হবেন না! শীতল প্রভাব সহ অভিনব সাইট তৈরি করতে আপনার সিএসএস বা পিএইচপি জানতে হবে না। কিছু সাধারণ এইচটিএমএল ট্যাগ এবং কীভাবে অনুলিপি করতে হবে তা জেনে রাখুন।
কিছু শীতল এইচটিএমএল প্রভাব দিয়ে শুরু করার জন্য, আমরা এই ফ্রি এইচটিএমএল এফেক্ট কোড টেম্পলেটগুলি সংকলন করেছি। এগুলি আপনার সাইটটির কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়িয়ে তুলবে, যখন ব্যাংকটি ভাঙ্গবে না। তারা বেশিরভাগ এইচটিএমএল থাকাকালীন এই দুর্দান্ত কোডগুলিতে কিছু সিএসএস এবং পিএইচপি থাকতে পারে।
1. এইচটিএমএল সহ দুর্দান্ত প্যারাল্যাক্স এফেক্ট
আপনি সম্ভবত অনলাইন বিজ্ঞাপনগুলির সাথে ওয়েবসাইটগুলিতে ব্যবহৃত প্যারালাক্স এফেক্টটি দেখেছেন। আপনি কোনও নিবন্ধ স্ক্রোল করার সাথে সাথে পটভূমির চিত্রটি অন্য গতিতে স্ক্রোল করে প্রদর্শিত হচ্ছে বা কোনও বিজ্ঞাপন উপস্থিত হবে।
বিকল্পভাবে, সম্ভবত আপনি সাইটের বিভিন্ন অংশ ঘুরে দেখার সাথে ব্যাকগ্রাউন্ড চিত্র পরিবর্তন হয় changes এটি একটি দুর্দান্ত প্রভাব যা আপনি মৌলিক এইচটিএমএল কোডটি বুঝতে না পারলেও সামগ্রীতে ভিজ্যুয়াল গভীরতা এবং আদর্শকে যুক্ত করে।
আপনি এফেক্টের সাথে খেলতে পারেন এবং ডাব্লু 3 স্কুল থেকে একটি সাধারণ প্যারালাক্স স্ক্রোলিং এফেক্টের জন্য কোডটি অনুলিপি করতে পারেন।
এর অতি পরিশীলিত সংস্করণে, এই প্রভাবটি এইচটিএমএল, সিএসএস এবং জেএস এর সংমিশ্রণ।
উপরে যান এবং কোডপেন থেকে উপরের শিরোনাম / পাদচরণ প্যারাল্যাক্স প্রভাবের জন্য কোডগুলি আনুন ।
২. স্ক্রোলযোগ্য এইচটিএমএল মন্তব্য বক্স কোড
এটি একটি সাধারণ তবে সহায়ক এইচটিএমএল উপাদান যা আপনাকে দীর্ঘতর স্নিপেটগুলি একটি কমপ্যাক্ট ফর্ম্যাটে প্যাক করতে দেয়। এইভাবে এটি পৃষ্ঠায় পুরো স্থান গ্রহণ করে না।
এটি আপনার প্রয়োজনীয়তার সাথে মানিয়ে নিতে আপনি রঙ এবং পাঠ্য বাক্সের আকারের সাথে খেলতে পারেন।
ইনপুট:
<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>
আপনি যদি কিছুটা অনুরাগী কিছু চান, তবে আপনি কোয়াকিট থেকে একটি অনুকূলিতকরণযোগ্য মন্তব্য বাক্সের জন্য কোডও আনতে পারেন।
তারা বেশ কয়েকটি টেম্পলেট সরবরাহ করে তবে আপনি নিজের সম্পাদককে নিজের কাস্টম কোডটি ম্যানুয়ালি পরিবর্তন এবং পরীক্ষা করতে (রান করতে) ব্যবহার করতে পারেন।
3. একটি দুর্দান্ত এইচটিএমএল ট্রিক: হাইলাইটেড টেক্সট
একটি সাধারণ <স্প্যান> এইচটিএমএল ট্যাগ দিয়ে আপনি আপনার পাঠ্য বা চিত্রগুলিতে এক টন শীতল প্রভাব যুক্ত করতে পারেন। নোট করুন যে তাদের সমস্ত ব্রাউজার জুড়ে কাজ করে না। এখানে উল্লিখিতগুলি গুগল ক্রোম, মাইক্রোসফ্ট এজ এবং মজিলা ফায়ারফক্সে কাজ করে।
এই এইচটিএমএল পাঠ্য প্রভাব <span> ট্যাগের মধ্যে পাঠ্যকে হাইলাইট করে।
ইনপুট:
<span style="background-color: #FFFF00>Your highlighted text here.</span>
আউটপুট ডেমো:
৪. পাঠ্যে ব্যাকগ্রাউন্ড চিত্র যুক্ত করুন
তেমনি, আপনি আপনার পাঠ্যের রঙ পরিবর্তন করতে পারেন বা একটি পটভূমি চিত্র যুক্ত করতে পারেন। পাঠ্যের ফন্টের আকার বড় হলে এটি দেখতে দুর্দান্ত লাগে।
ইনপুট:
<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>
<strong> ট্যাগটিতে পাঠ্যটিতে স্টাইল এবং ফন্টের উপাদান যুক্ত করে একই প্রভাব অর্জন করা হয়।
আউটপুট ডেমো:
৫. একটি শিরোনামের টুলটিপ যুক্ত করার জন্য দরকারী এইচটিএমএল ট্রিক
আপনি যখন "ম্যানিপুলেটেড" টেক্সট বা চিত্রের টুকরো ধরে মাউসটি দিয়ে স্ক্রোল করেন তখন একটি শিরোনামের সরঞ্জামদণ্ডটি উপস্থিত হয়। আপনি চিত্রগুলি, লিঙ্কযুক্ত পাঠ্য বা ডেস্কটপ অ্যাপ্লিকেশনগুলিতে মেনু আইটেমগুলিতে ওয়েবসাইটগুলিতে এগুলি ব্যবহার করেছেন। আপনার ওয়েবপৃষ্ঠায় সরল পাঠ্যে একটি সরঞ্জামদণ্ড যুক্ত করতে এই এইচটিএমএল কোডটি ব্যবহার করুন।
ইনপুট:
<span title="See, this is the tooltip. :)">Move your mouse over me!</span>
আউটপুট ডেমো:
6. এখনও দুর্দান্ততম কৌশলগুলি: স্ক্রোলিং বা পড়ন্ত পাঠ্য
আপনি যখন গুগলে "মার্কি এইচটিএমএল" অনুসন্ধান করেন, আপনি কিছুটা ইস্টার ডিম আবিষ্কার করবেন। শীর্ষে স্ক্রোলিং অনুসন্ধান ফলাফল গণনা দেখুন? এটি একটি প্রভাব এখন অপ্রচলিত মার্কি ট্যাগ দ্বারা নির্মিত। যদিও এই একবার শীতল এইচটিএমএল পাঠ্য প্রভাব হ্রাস করা হয়েছে, বেশিরভাগ ব্রাউজার এখনও এটি সমর্থন করে।
ইনপুট:
<marquee>I wanna scroll with it, baby!</marquee>
আউটপুট ডেমো:
আপনি স্ক্রোলিং আচরণ, পটভূমির রঙ, দিকনির্দেশ, উচ্চতা এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে আরও গুণাবলী যুক্ত করতে পারেন। যত্ন নিন, তবে; এই প্রভাবগুলি অতিরিক্ত বিরক্ত হলে বেশ বিরক্তিকর হয়ে উঠতে পারে।
শীতল পতনযোগ্য পাঠ্য প্রভাবের জন্য, আবার কোয়েসকেটে যান এবং তাদের অত্যন্ত স্বনির্ধারিত মার্কি কোডটি অনুলিপি করুন।
HTML. এইচটিএমএল সহ একটি দুর্দান্ত সুইচম্যানু তৈরি করুন
দুর্দান্ততম HTML কৌশলগুলি গতিশীল এইচটিএমএল প্রভাবগুলি। তবে এগুলি প্রায়শই স্ক্রিপ্ট ভিত্তিক থাকে। মেনুগুলির জন্য এখানে একটি প্রভাব রয়েছে যা আপনি সম্মত হবেন খুব চতুর looks
এটি আপনার গড় এইচটিএমএল ট্যাগের চেয়ে কিছুটা জটিল কারণ এটি স্টাইল শীট এবং স্ক্রিপ্টগুলির সাথে কাজ করে। সুবিধাটি হ'ল এটি কার্যকর করতে আপনাকে কোনও সিএসএস বা স্ক্রিপ্ট ফাইল আপলোড করতে হবে না। পরিবর্তে, কেবল নীচের কোডটি আপনার ওয়েবসাইটের <হেড> বিভাগে পেস্ট করুন।
ইনপুট:
<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 http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://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 menu to persist across site, "local" for this page onlyif (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>
And this code goes wherever you want the dynamic menu to appear.
<!-- Keep all menus within masterdiv-->
<div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
<span id="sub1">
- <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
- <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
- <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
- <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
...and more!
</span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
<span id="sub2">
- <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
- <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
- <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
...and more!
</span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
<span id="sub3">
- <a href="https://www.makeuseof.com/about/">About</a><br>
- <a href="https://www.makeuseof.com/contact">Contact</a><br>
- <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
- <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
</span></div>
আউটপুট ডেমো:
দুর্ভাগ্যক্রমে, আমরা এখানে এই প্রভাবটি প্রদর্শন করতে পারি না। তবে মূল উত্স, ডায়নামিক ড্রাইভ এই গতিশীল এইচটিএমএল প্রভাবের একটি কার্যকরী অনুলিপি বৈশিষ্ট্যযুক্ত।
৮. টেবিলাইজার সহ একটি এইচটিএমএল স্প্রেডশিট পান
আপনি যদি নিজের সাইটে কোনও স্প্রেডশিট প্রদর্শন করতে চান তবে টেবিলাইজারকে দিন! আপনার ডেটা এইচটিএমএল টেবিলের মধ্যে রূপান্তর করুন। কেবল এক্সেল, গুগল ডক, বা অন্য কোনও স্প্রেডশিট থেকে টেবিলাইজার.জার্নালিস্টোপিয়া.কম এ রূপান্তরকারী সরঞ্জামে পেস্ট করুন । টেবিল অপশনগুলি সাম্প্রতিক করুন , তারপরে এইচটিএমএল আউটপুট পেতে এটি টেবিলাইজ করুন ক্লিক করুন।
এটি টেবিলাইজ হিসাবে আপনার ওয়েবসাইটের জন্য সম্ভবত একটি দুর্দান্ত HTML কোডগুলির মধ্যে একটি! সমস্ত কঠোর পরিশ্রম করে।
এইচটিএমএল কোডটি অনুলিপি করতে এবং এটি আপনার ওয়েবসাইটে যুক্ত করতে ক্লিপবোর্ডে এইচটিএমএল অনুলিপি করুন ক্লিক করুন। এটিকে অনেক শীতল দেখানোর জন্য পটভূমির রঙগুলি সম্পাদনা করার বিষয়টি বিবেচনা করুন।
যদিও এটি আসলে কোনও HTML প্রভাব নয়, এটি বেশ কার্যকর।
আপনার সাইটের জন্য আরও দুর্দান্ত HTML কোড এবং প্রভাব
এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের শক্তি আপনার ওয়েবসাইটে অত্যাশ্চর্য প্রভাবের জন্য সম্ভাব্য সীমাহীন বিকল্প সরবরাহ করে। আরো চাই?
- এইচটিএমএল গুডিজ আপনাকে দুর্দান্ত <স্প্যান> ট্যাগ ধারণা দেয়।
- ডায়নামিক ড্রাইভে অনেক অবিশ্বাস্য গতিশীল এইচটিএমএল স্ক্রিপ্ট রয়েছে।
- কোয়াকিট শীতল এইচটিএমএল কোড সরবরাহ করে।
আমরা আপনাকে আটটি দুর্দান্ত HTML কোড দেখিয়েছি যা আপনি নিজের ওয়েবসাইটকে উন্নত করতে অনুলিপি করতে পারেন। ভিন্ন হলেও, যতক্ষণ না আপনি বেসিক এইচটিএমএল কোডিংয়ের কৌশলগুলি জানেন ততক্ষণ এগুলি কার্যকর করা সহজ।
