Home-theater-designers
আপনি আপনার ওয়েবসাইটকে অসাধারণ দেখতে চান --- কিন্তু আপনার ওয়েব ডেভেলপমেন্ট দক্ষতার অভাব রয়েছে।
হতাশ হবেন না! শীতল প্রভাব সহ একটি অভিনব সাইট তৈরি করতে আপনাকে CSS বা PHP জানতে হবে না। কিছু সহজ এইচটিএমএল ট্যাগ এবং কিভাবে কপি-পেস্ট করতে হয় তা জানলে কাজ হবে।
আপনাকে কিছু দুর্দান্ত এইচটিএমএল প্রভাব দিয়ে শুরু করতে, আমরা এই বিনামূল্যে এইচটিএমএল প্রভাব কোড টেমপ্লেটগুলি সংকলিত করেছি। তারা আপনার সাইটের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে, যখন ব্যাংক ভাঙবে না। যদিও তারা বেশিরভাগ এইচটিএমএল এই শীতল কোডগুলিতে কিছু সিএসএস এবং পিএইচপি থাকতে পারে।
1. এইচটিএমএল দিয়ে কুল লম্বা প্রভাব
আপনি সম্ভবত অনলাইন বিজ্ঞাপন সহ ওয়েবসাইটগুলিতে ব্যবহৃত প্যারাল্যাক্স ইফেক্ট দেখেছেন। আপনি একটি নিবন্ধ নিচে স্ক্রোল হিসাবে, ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করা দেখা যাচ্ছে একটি ভিন্ন গতিতে, অথবা একটি বিজ্ঞাপন প্রদর্শিত হয়।
বিকল্পভাবে, সম্ভবত আপনি সাইটের বিভিন্ন অংশ পরিদর্শন করার সময় ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করে। এটি একটি দুর্দান্ত প্রভাব যা বিষয়বস্তুতে ভিজ্যুয়াল গভীরতা যোগ করে এবং আপনি না করলেও আদর্শ বেসিক HTML কোড বুঝুন ।
আপনি প্রভাব দিয়ে খেলতে পারেন এবং a এর জন্য কোডটি অনুলিপি করতে পারেন W3Schools থেকে সহজ লম্বা স্ক্রোলিং প্রভাব ।
এর সবচেয়ে অত্যাধুনিক সংস্করণে, এই প্রভাবটি এইচটিএমএল, সিএসএস এবং জেএস এর সংমিশ্রণ।
এগিয়ে যান এবং উপরের কোডগুলি আনুন CodePen থেকে হেডার/ফুটার লম্বন প্রভাব ।
2. স্ক্রোলযোগ্য HTML মন্তব্য বাক্স কোড
এটি একটি সহজ কিন্তু সহায়ক এইচটিএমএল উপাদান যা আপনাকে টেক্সটের দীর্ঘ স্নিপেটগুলিকে একটি কম্প্যাক্ট ফরম্যাটে প্যাক করতে দেয়। এইভাবে এটি পৃষ্ঠার পুরো স্থানটি গ্রহণ করে না।
আপনি আপনার প্রয়োজন অনুসারে টেক্সট বক্সের রঙ এবং আকারের সাথে খেলতে পারেন।
ইনপুট:
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! :) আপনি যদি একটু কৌতূহলী কিছু চান, আপনি কোডও আনতে পারেন Quackit থেকে একটি স্বনির্ধারিত মন্তব্য বাক্স ।
তারা বেশ কয়েকটি টেমপ্লেট অফার করে, কিন্তু আপনি তাদের সম্পাদককে ম্যানুয়ালি পরিবর্তন করতে এবং আপনার কাস্টম কোড পরীক্ষা করতে (চালাতে) ব্যবহার করতে পারেন।
3. একটি চমৎকার HTML কৌশল: হাইলাইট করা পাঠ্য
একটি সহজ সঙ্গেএইচটিএমএল ট্যাগ আপনি আপনার টেক্সট বা ছবিতে এক টন শীতল প্রভাব যোগ করতে পারেন। মনে রাখবেন যে তাদের সবাই ব্রাউজার জুড়ে কাজ করে না। এখানে উল্লেখিতগুলি গুগল ক্রোম, মাইক্রোসফ্ট এজ এবং মজিলা ফায়ারফক্সে কাজ করে।
এই এইচটিএমএল টেক্সট এফেক্টের মধ্যে টেক্সট হাইলাইট করেট্যাগ.
ইনপুট:
Your highlighted text here.আউটপুট ডেমো:
4. টেক্সটে ব্যাকগ্রাউন্ড ইমেজ যোগ করুন
একইভাবে, আপনি আপনার পাঠ্যের রঙ পরিবর্তন করতে পারেন বা একটি পটভূমি চিত্র যুক্ত করতে পারেন। যদি টেক্সটের ফন্ট সাইজ বড় হয় তবে এটি চমৎকার দেখায়।
ইনপুট:
MakeUseOf presents...একই প্রভাব টেক্সটে শৈলী এবং ফন্ট উপাদান যোগ করে অর্জন করা হয় ট্যাগ
রিং ডোরবেল গুগল হোমের সাথে কাজ করে
আউটপুট ডেমো:
5. একটি শিরোনাম টুলটিপ যোগ করার জন্য দরকারী HTML কৌশল
একটি শিরোনাম টুলটিপ আসে যখন আপনি মাউস দিয়ে 'ম্যানিপুলেটেড' টেক্সট বা চিত্রের উপর স্ক্রোল করেন। আপনি ইমেজ, লিঙ্ক করা টেক্সট, অথবা ডেস্কটপ অ্যাপের মেনু আইটেমের ওয়েবসাইটগুলিতে এইগুলি ব্যবহার করতে দেখেছেন। আপনার ওয়েবপেজে প্লেইন টেক্সটে একটি টুলটিপ যোগ করতে এই HTML কোডটি ব্যবহার করুন।
ইনপুট:
Move your mouse over me!আউটপুট ডেমো:
6. এখনও পর্যন্ত সবচেয়ে সুন্দর HTML কৌশল: স্ক্রোলিং বা পতনশীল পাঠ্য
যখন আপনি Google এ 'marquee html' সার্চ করবেন, তখন আপনি একটু ইস্টার ডিম আবিষ্কার করবেন। উপরের দিকে স্ক্রোলিং সার্চ ফলাফল গণনা দেখুন? এটি এখন অপ্রচলিত মার্কি ট্যাগ দ্বারা সৃষ্ট একটি প্রভাব। যদিও এই একবার শীতল HTML টেক্সট প্রভাবটি বাতিল করা হয়েছে, বেশিরভাগ ব্রাউজার এখনও এটি সমর্থন করে।
ইনপুট:
I wanna scroll with it, baby!আউটপুট ডেমো:
আপনি পারেন আরও বৈশিষ্ট্য যোগ করুন স্ক্রোলিং আচরণ, পটভূমির রঙ, দিক, উচ্চতা এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে। তবে যত্ন নিন; অতিরিক্ত ব্যবহার করলে এই প্রভাবগুলি বেশ বিরক্তিকর হয়ে উঠতে পারে।
একটি শীতল পতনশীল পাঠ্য প্রভাবের জন্য, আবার Quackit যাও এবং তাদের অত্যন্ত কাস্টমাইজড মার্কি কোড কপি করুন।
7. এইচটিএমএল দিয়ে কুল সুইচ মেনু তৈরি করুন
দুর্দান্ত এইচটিএমএল ট্রিকস হল ডায়নামিক এইচটিএমএল এফেক্টস। যাইহোক, তারা প্রায়ই স্ক্রিপ্ট ভিত্তিক হয়। এখানে মেনুগুলির জন্য একটি প্রভাব যা আপনি সম্মত হবেন খুব চতুর দেখায়।
এটি আপনার গড় HTML ট্যাগের চেয়ে একটু বেশি জটিল কারণ এটি একটি স্টাইল শীট এবং স্ক্রিপ্ট দিয়ে কাজ করে। সুবিধা হল যে এটি কাজ করার জন্য আপনাকে একটি 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;
}
/***********************************************
* 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('n')
document.write('.submenu{display: none;}n')
document.write('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 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
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
আউটপুট ডেমো:
দুর্ভাগ্যবশত, আমরা এখানে এই প্রভাব প্রদর্শন করতে পারি না। কিন্তু মূল উৎস, ডায়নামিক ড্রাইভ , এই ডায়নামিক এইচটিএমএল এফেক্টের একটি কার্যকরী কপি রয়েছে।
8. টেবিলাইজার দিয়ে একটি HTML স্প্রেডশীট পান
আপনি যদি আপনার সাইটে একটি স্প্রেডশীট প্রদর্শন করতে চান, তাহলে টেবিলাইজার দিন! আপনার ডেটাকে একটি HTML টেবিলে রূপান্তর করুন। শুধু এক্সেল, গুগল ডক, বা অন্য কোন স্প্রেডশীট থেকে কাঁচা ডেটা কনভার্টার টুলে পেস্ট করুন tableizer.journalistopia.com । খামচি টেবিল বিকল্প , তারপর ক্লিক করুন এটি টেবিলাইজ করুন HTML আউটপুট পেতে।
এটি সম্ভবত আপনার ওয়েবসাইটের জন্য একটি দুর্দান্ত এইচটিএমএল কোড, যেমন টেবিলাইজ ইট! সব কঠোর পরিশ্রম করে।
ক্লিক ক্লিপবোর্ডে HTML অনুলিপি করুন এইচটিএমএল কোড কপি করে আপনার ওয়েবসাইটে যোগ করতে। ব্যাকগ্রাউন্ড-কালার এডিট করার কথা ভাবুন যাতে এটি অনেক বেশি ঠান্ডা হয়।
আমার হার্ড ড্রাইভ খারাপ কিনা আমি কিভাবে জানব?
যদিও এটি সত্যিই একটি এইচটিএমএল প্রভাব নয়, এটি বেশ সহজ।
আপনার সাইটের জন্য আরো চমৎকার HTML কোড এবং প্রভাব
এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের ক্ষমতা আপনার ওয়েবসাইটে অত্যাশ্চর্য প্রভাবের জন্য সম্ভাব্য সীমাহীন অপশন সরবরাহ করে। আরো চাই?
- HTML গুডিজ আপনাকে দুর্দান্ত দেয়ট্যাগ ধারণা।
- ডায়নামিক ড্রাইভ অনেক অবিশ্বাস্য গতিশীল HTML স্ক্রিপ্ট আছে।
- কোয়াকিট চমৎকার HTML কোড অফার করে।
আমরা আপনাকে আটটি দুর্দান্ত এইচটিএমএল কোড দেখিয়েছি যা আপনি আপনার ওয়েবসাইটকে উন্নত করতে অনুলিপি করতে পারেন। ভিন্ন হলেও, যতক্ষণ না আপনি প্রাথমিক HTML কোডিং কৌশলগুলি জানেন ততক্ষণ সেগুলি বাস্তবায়ন করা সহজ।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল 17 টি সহজ HTML কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেনএকটি বেসিক ওয়েবপেজ তৈরি করতে চান? এই এইচটিএমএল উদাহরণগুলি শিখুন এবং সেগুলি আপনার ব্রাউজারে কেমন দেখাচ্ছে তা দেখতে একটি টেক্সট এডিটরে চেষ্টা করে দেখুন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডেভেলপমেন্ট
- ওয়েবমাস্টার টুলস
সিকিউরিটি, লিনাক্স, ডিআইওয়াই, প্রোগ্রামিং, এবং টেক এক্সপ্লাইন্ডের জন্য ডেপুটি এডিটর এবং ডেস্কটপ এবং সফটওয়্যার সাপোর্টে ব্যাপক অভিজ্ঞতার সাথে সত্যিই উপকারী পডকাস্ট প্রযোজক। লিনাক্স ফরম্যাট ম্যাগাজিনের একজন অবদানকারী, ক্রিশ্চিয়ান একজন রাস্পবেরি পাই টিঙ্কার, লেগো প্রেমিক এবং রেট্রো গেমিং ফ্যান।
ক্রিশ্চিয়ান কাওলি থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন