কিভাবে একটি ওয়েবসাইট তৈরি করবেন: নতুনদের জন্য

আপনি কি সবসময় একটি ওয়েবসাইট তৈরি করতে চেয়েছিলেন? হয়তো আপনি আমাদের কিছু HTML পড়েছেন ( HTML বোঝা ) এবং CSS টিউটোরিয়াল, কিন্তু একটি বড় প্রকল্পে সেই ভাষাগুলি কীভাবে ব্যবহার করবেন তা জানেন না।

আজ আমি আপনাকে সম্পূর্ণ ওয়েবসাইট তৈরির প্রক্রিয়ার মাধ্যমে শুরু থেকে নির্দেশনা দেব। যদি এটি একটি কঠিন কাজ বলে মনে হয় তবে চিন্তা করবেন না, আমি আপনাকে এটির প্রতিটি ধাপে পথ দেখাব।

---

---

আপনি jQuery (jQuery এর নির্দেশিকা) এর স্পর্শে HTML, CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে এই ওয়েবসাইটটি তৈরি করবেন। তুমি কিছুই করবে না সত্যিই রক্তপাত প্রান্ত, তাই এই কোডটি বেশিরভাগ আধুনিক ব্রাউজারে মোটামুটি ভালভাবে কাজ করা উচিত।

আপনি যদি কোন CSS সম্পর্কে নিশ্চিত না হন, তাহলে দেখুন সিএসএস গাইড এ W3Schools.com ।

নকশা

এই ওয়েবসাইটের ডিজাইন এখানে। একটি উচ্চ রেজল্যুশন ইমেজ দেখুন যদি আপনি একটি ভাল চেহারা চান, অথবা আরও ভাল, সম্পূর্ণ প্রকল্পটি ডাউনলোড করুন এখানে।

আমি একটি কাল্পনিক কোম্পানির জন্য এই ওয়েবসাইটটি ডিজাইন করেছি অ্যাডোবি ফটোশপ 2017. যদি আপনি আগ্রহী হন, তাহলে নিশ্চিত করুন যে আপনি বান্ডেল ডাউনলোড থেকে .PSD ফাইলটি দখল করেছেন। ফটোশপ ফাইলে আপনি যা পান তা এখানে:

PSD এর ভিতরে, আপনি সমস্ত স্তরগুলিকে গোষ্ঠীভুক্ত, নামযুক্ত এবং রঙ কোডেড পাবেন:

---

---

জিনিসগুলি সঠিক দেখানোর জন্য আপনার কয়েকটি ফন্ট ইনস্টল করা দরকার। প্রথমটি হল ফন্ট অসাধারণ , সব আইকনের জন্য ব্যবহৃত। অন্য দুটি ফন্ট হল পিটি সেরিফ এবং অসংখ্য প্রো (ফটোশপের সাথে অন্তর্ভুক্ত)। আপনি যদি ফন্টগুলি কীভাবে ইনস্টল করবেন তা নিশ্চিত না হন তবে আমাদের গাইডটি পড়ুন।

আপনার যদি না থাকে তবে চিন্তা করবেন না অ্যাডোবি ফটোশপ , এগিয়ে যাওয়ার জন্য আপনার এটির প্রয়োজন নেই।

---

---

প্রাথমিক কোড

এখন যে নকশাটি পরিষ্কার, আসুন কোডিং শুরু করি! আপনার প্রিয় টেক্সট এডিটরে একটি নতুন ফাইল তৈরি করুন (আমি ব্যবহার করছি মহৎ পাঠ 3 )। এই হিসাবে সংরক্ষণ করুন index.html । আপনি এটিকে আপনার পছন্দের যেকোনো কিছু বলতে পারেন, অনেকগুলি পৃষ্ঠাকে সূচী বলা হয় তার কারণ ওয়েব সার্ভারগুলি যেভাবে কাজ করে। বেশিরভাগ সার্ভারের জন্য ডিফল্ট কনফিগারেশন হল index.html পৃষ্ঠা পরিবেশন করা যদি কোন পৃষ্ঠা নির্দিষ্ট না থাকে।

আপনি যদি বিস্তারিত জানতে না চান, তাহলে ডাউনলোড থেকে সম্পূর্ণ কোডটি ধরুন।

এখানে আপনার প্রয়োজন কোড:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */




এটি বেশ কয়েকটি কাজ করে:

• প্রয়োজনীয় ন্যূনতম HTML সংজ্ঞায়িত করে।
• 'নয়েজ মিডিয়া' এর একটি পৃষ্ঠার শিরোনাম সংজ্ঞায়িত করে
• গুগল সিডিএন (একটি সিডিএন কি) তে হোস্ট করা jQuery অন্তর্ভুক্ত।
• গুগল সিডিএন -এ হোস্ট করা ফন্ট অসাধারণ অন্তর্ভুক্ত।
• সংজ্ঞায়িত করে a শৈলী আপনার সিএসএস লিখতে ট্যাগ করুন।
• সংজ্ঞায়িত করে a লিপি আপনার জাভাস্ক্রিপ্ট লিখতে ট্যাগ করুন।

আপনার ফাইলটি আবার সংরক্ষণ করুন এবং আপনার ওয়েব ব্রাউজারে খুলুন। আপনি সম্ভবত অনেক কিছু লক্ষ্য করবেন না, এবং এটি অবশ্যই একটি ওয়েবসাইটের মত দেখতে হবে না।

পাতার শিরোনাম কেমন তা লক্ষ্য করুন নয়েজ মিডিয়া । এটি ভিতরের পাঠ্য দ্বারা সংজ্ঞায়িত করা হয়েছে শিরোনাম ট্যাগ এই আছে এর ভিতরে থাকা মাথা ট্যাগ.

32 গিগাবাইট কত ছবি রাখা যায়

হেডার

হেডার তৈরি করা যাক। এখানে যে মত দেখাচ্ছে:

শীর্ষে সেই ছোট ধূসর বিট দিয়ে শুরু করা যাক। এটি একটি হালকা ধূসর নীচে সামান্য গা dark় ধূসর। এখানে একটি বন্ধ আছে:

এই HTML এর ভিতরে যোগ করুন শরীর শীর্ষে ট্যাগ:

যখন আপনি এখানে আছেন, আসুন এটিকে ভেঙে ফেলি। ক ডিভ অন্যান্য জিনিস রাখার জন্য একটি পাত্রে মত। নির্দিষ্ট ট্যাগগুলিতে কী যেতে পারে তার কিছু সীমাবদ্ধতা রয়েছে, তবে ডিভগুলি মোটামুটি জেনেরিক জিনিস। এটি একটি আছে আইডি এর শীর্ষ বার । এটি সিএসএস দিয়ে স্টাইল করার জন্য ব্যবহার করা হবে, এবং প্রয়োজনে জাভাস্ক্রিপ্ট দিয়ে এটি লক্ষ্য করুন। নিশ্চিত করুন যে আপনার একটি নির্দিষ্ট আইডি সহ কেবল একটি উপাদান রয়েছে - সেগুলি অনন্য হওয়া উচিত। যদি আপনি একাধিক উপাদানের একই নাম রাখতে চান, a ব্যবহার করুন শ্রেণী পরিবর্তে - এটি তাদের জন্য ডিজাইন করা হয়েছে! এখানে সিএসএস আপনার স্টাইল করতে হবে (আপনার ভিতরে শীর্ষে রাখুন শৈলী ট্যাগ):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

লক্ষ্য করুন কিভাবে নামের আগে হ্যাশ চিহ্ন (#, হ্যাশট্যাগ, পাউন্ড চিহ্ন) ব্যবহার করা হয়। এর মানে হল যে উপাদানটি একটি আইডি। যদি আপনি একটি ক্লাস ব্যবহার করেন, আপনি পরিবর্তে একটি পূর্ণ স্টপ (।) ব্যবহার করবেন। দ্য html এবং শরীর ট্যাগ তাদের প্যাডিং এবং মার্জিন শূন্য সেট আছে। এটি কোনও অবাঞ্ছিত ব্যবধান সমস্যা প্রতিরোধ করে।

লোগো এবং নাভারে যাওয়ার সময় এসেছে। আপনি শুরু করার আগে, এই সামগ্রীটি রাখার জন্য আপনার একটি ধারক প্রয়োজন না একটি প্রতিক্রিয়াশীল ওয়েবসাইট, এটি 900 পিক্সেল প্রশস্ত করুন।

HTML:




CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

আপনি কোডটি শেষ না করা পর্যন্ত কী ঘটছে তা বলা কঠিন হতে পারে, তাই কী ঘটছে তা দেখতে একটি (অস্থায়ী) রঙিন পটভূমি যোগ করা সহায়ক হতে পারে:

background: red;

এখনই লোগো তৈরির সময়। ফন্ট অসাধারণ আইকনের জন্যই প্রয়োজন। ফন্ট অসাধারণ একটি ভেক্টর ফন্ট হিসাবে প্যাকেজ করা আইকনগুলির একটি সেট - অসাধারণ! উপরের প্রাথমিক কোডটি ইতিমধ্যে ফন্ট অসাধারণ সেটআপ করেছে, তাই এটি সবই প্রস্তুত!

এই HTML যোগ করুন ভিতরে দ্য স্বাভাবিক মোড়ক div:





CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

অন্যান্য ফন্টগুলি নকশার সাথে মেলে না তা নিয়ে চিন্তা করবেন না - আপনি এটি পরে পরিপাটি করবেন। আপনি যদি বিভিন্ন আইকন ব্যবহার করতে চান, তাহলে এর দিকে যান ফন্ট অসাধারণ আইকন পৃষ্ঠা, এবং তারপর পরিবর্তন fa-volume-down আপনি যে আইকনটি ব্যবহার করতে চান তার নাম।

ন্যাভিগেশন বারে অগ্রসর হয়ে, আপনি একটি অনিয়ন্ত্রিত তালিকা ব্যবহার করবেন ( দ্য ) এই জন্য। এই HTML যোগ করুন পরে দ্য লোগো-ধারক (কিন্তু এখনও ভিতরে স্বাভাবিক মোড়ক ):

• Home


• About


• Reviews


• Contact

দ্য href অন্যান্য পৃষ্ঠায় লিঙ্ক করতে ব্যবহৃত হয়। এই টিউটোরিয়াল ওয়েবসাইটে অন্য কোন পৃষ্ঠা নেই, কিন্তু আপনি এখানে নাম এবং ফাইলের পথ (প্রয়োজন হলে) রাখতে পারেন, যেমন রিভিউ.এইচটিএমএল । নিশ্চিত করুন যে আপনি এটি দুটি ডাবল কোটের ভিতরে রেখেছেন।

এখানে CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

এই CSS একটি দিয়ে শুরু হয় unordered তালিকা । এটি ব্যবহার করে বুলেট পয়েন্টগুলি সরিয়ে দেয় তালিকা-শৈলী-টাইপ: কেউ না; । লিঙ্কগুলি একটু দূরে থাকে এবং যখন আপনি তাদের উপর আপনার মাউস ঘুরান তখন একটি রঙ দেওয়া হয়। ছোট ধূসর বিভাজক প্রতিটি উপাদানের একটি ডান সীমানা, যা তারপর ব্যবহার করে শেষ উপাদানটির জন্য সরানো হয় শেষ লিঙ্ক শ্রেণী এখানে যে মত দেখাচ্ছে:

এই বিভাগের জন্য যা বাকি আছে তা হল লাল অনুভূমিক রঙের হাইলাইট। এর পরে এই HTML যোগ করুন স্বাভাবিক মোড়ক :

এবং এখানে CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

এটিই শীর্ষ বিভাগ সম্পন্ন হয়েছে। এখানে এটি দেখতে কেমন দেখাচ্ছে - নকশাটির অনুরূপ?

প্রধান বিষয়বস্তু এলাকা

এখন মূল বিষয়বস্তু এলাকায় যাওয়ার সময়-তথাকথিত 'ভাঁজের উপরে'। এই অংশটি দেখতে কেমন তা এখানে:

এটি একটি খুব সহজ অংশ, ডানদিকে একটি চিত্র সহ বাম দিকের কিছু পাঠ্য। এই এলাকা হবে আলগাভাবে প্রায় তৃতীয়াংশে বিভক্ত, প্রায় আনুমানিক গোল্ডেন রেশিও ।

এই অংশের জন্য আপনার নমুনা চিত্রের প্রয়োজন হবে। এটি ডাউনলোডের অন্তর্ভুক্ত। এই ছবিটি 670px প্রশস্ত, এবং আমাদের প্যানাসনিক Lumix DMC-G80/G85 পর্যালোচনা থেকে।

HTML যোগ করুন পরে দ্য শীর্ষ-রঙ-স্প্ল্যাশ উপাদান:

Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this website.

ঝামেলা করার জন্য শীতল জিনিস

Alternatively, check out our review of the Panasonic G80 shown on the right!

লক্ষ্য করুন কিভাবে স্বাভাবিক মোড়ক উপাদান ফিরে এসেছে (এটি ক্লাস ব্যবহার করার আনন্দ)। আপনি হয়তো ভাবছেন কেন ছবিটি ( img ) ট্যাগ বন্ধ হয় না। এটি একটি সেলফ ক্লোজিং ট্যাগ। ফরোয়ার্ড স্ল্যাশ ( /> ) এটি নির্দেশ করে, কারণ এটি সর্বদা একটি ট্যাগ বন্ধ করার অর্থ রাখে না।

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

এখানে সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য হল বক্স-সাইজিং: বর্ডার-বক্স; । এটি নিশ্চিত করে যে উপাদানগুলি সর্বদা 40% বা 60% প্রস্থ হতে চলেছে। ডিফল্ট (এই বৈশিষ্ট্য ছাড়া) আপনার নির্দিষ্ট প্রস্থ প্লাস কোন প্যাডিং, মার্জিন এবং সীমানা। ইমেজ ক্লাস ( বৈশিষ্ট্যযুক্ত ইমেজ ) একটি আছে সর্বোচ্চ প্রস্থ এর 500px । যদি আপনি শুধুমাত্র একটি মাত্রা (একটি প্রস্থ বা একটি উচ্চতা) নির্দিষ্ট করেন, এবং অন্যটি ফাঁকা রাখেন, CSS ইমেজটির আকার অনুপাত বজায় রেখে ছবিটির আকার পরিবর্তন করবে।

উদ্ধৃতি এলাকা

আসুন উদ্ধৃতি এলাকা তৈরি করি। এখানে এই মত দেখাচ্ছে:

এটি আরেকটি সহজ এলাকা। এটি একটি গা gray় ধূসর পটভূমি, সাদা কেন্দ্রিক পাঠ্য সহ।

এই HTML যোগ করুন পরে পূর্ববর্তী স্বাভাবিক মোড়ক :

makeuseof is the best website ever

Joe Coburn

এবং তারপর এই CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

এখানে খুব বেশি কিছু হচ্ছে না। সাইজিং হল প্রধান সমন্বয় প্রয়োজন - ফন্ট সাইজ, স্পেসিং ইত্যাদি। এখানে এখন পুরো জিনিসটা কেমন দেখাচ্ছে - এটি একটি ওয়েবসাইটের মতো দেখতে শুরু করেছে!

আইকন এরিয়া

চলুন টিপতে থাকি - এটি প্রায় শেষ! এখানে পরবর্তী এলাকা যা তৈরি করা প্রয়োজন:

এই অংশটি বেশ কয়েকটি ক্লাস ব্যবহার করবে। বিষয়বস্তু ব্যতীত তিনটি আইকন বেশিরভাগই একই, তাই আইডির পরিবর্তে ক্লাসগুলি ব্যবহার করা বোধগম্য। এই HTML যোগ করুন পরে পূর্ববর্তী উদ্ধৃতি এলাকা :

YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.

এই তিনটি আইকনও ফন্ট-অসাধারণ । HTML আবার ব্যবহার করছে স্বাভাবিক মোড়ক শ্রেণী এখানে CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

CSS- এ কিছু নতুন জিনিস চলছে। গোলাকার কোণগুলি সেট করা হচ্ছে সীমানা-ব্যাসার্ধ: 200px; । এই মানটি প্রস্থের সমান সেট করলে একটি নিখুঁত বৃত্তে পরিণত হয়। যদি আপনি গোলাকার কোণগুলির সাথে একটি বর্গক্ষেত্র বেশি পছন্দ করেন তবে আপনি এটি হ্রাস করতে পারেন। লক্ষ্য করুন কিভাবে ডিভিতে হভার অ্যাকশন প্রয়োগ করা হয় - এটি শুধুমাত্র লিঙ্কগুলিতে সীমাবদ্ধ নয়। এই বিভাগটি এখন কেমন দেখাচ্ছে তা এখানে:

পাদলেখ

শেষ কাজটি হল পাদলেখ! এটি সত্যিই সহজ, কারণ এটি একটি ধূসর এলাকা যার কোন পাঠ্য নেই। আইকন এলাকার পরে এই HTML যোগ করুন ' স্বাভাবিক মোড়ক :

এখানে CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

দেখুন - সত্যিই সহজ জিনিস।

কিছু Pizzazz যোগ করুন

এই যে, কোডিং সম্পন্ন! আপনি জিনিসগুলিকে একেবারে সেভাবেই ছেড়ে দিতে পারেন, এটি একটি সমাপ্ত ওয়েবপেজ। আপনি হয়ত লক্ষ্য করেছেন যে, এটি দেখতে না ঠিক নকশা মত। এর প্রধান কারণ হল ব্যবহৃত ফন্ট। আসুন এটি সমাধান করি।

বেশিরভাগ শিরোনামের জন্য ব্যবহৃত হরফটি অসংখ্য প্রো । এই সঙ্গে আসে অ্যাডোব ক্লাউড তৈরি করুন, কিন্তু এটি ওয়েবফন্ট হিসাবে উপলব্ধ নয়। বর্তমানে ওয়েবপেজে ব্যবহৃত ফন্ট হল হেলভেটিকা । এটি ঠিক দেখাচ্ছে, তাই আপনি এটিকে যেমন রেখে যেতে পারেন পিটি সানস ওয়েবফন্ট হিসেবে পাওয়া যায়। সমস্ত লেখার জন্য ব্যবহৃত হরফ হল পিটি সেরিফ , যা ওয়েবফন্ট হিসেবে পাওয়া যায়।

ওয়েবফন্ট একটি সহজ প্রক্রিয়া। আপনার কম্পিউটারে একটি নতুন ফন্ট লোড করার মতো, ওয়েবপেজগুলি চাহিদা অনুযায়ী ফন্ট লোড করতে পারে। এটি করার অন্যতম সেরা উপায় হল গুগল ফন্ট ।

আরও ভাল ফন্টে স্যুইচ করতে এই CSS যোগ করুন:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

এখন নতুন ফন্ট ব্যবহার করার জন্য আপনার এইচটিএমএল এবং শরীরের উপাদানগুলি সংশোধন করুন:

font-family: 'PT Serif', 'Helvetica', 'Arial';

লক্ষ্য করুন কিভাবে h3 উপাদান তালিকায় অন্তর্ভুক্ত নয় - এটি ডিফল্ট হয়ে যাবে পিটি-সেরিফ পরিবর্তে পিটি-সানস ।

সুন্দরতার চূড়ান্ত বিট হিসাবে, আসুন তিনটি ভিন্ন বৈশিষ্ট্যযুক্ত চিত্রের মাধ্যমে স্ক্রোল করার জন্য কিছু জাভাস্ক্রিপ্ট ব্যবহার করি। আপনার প্রয়োজন হবে ছবি_2 এবং ছবি _3 এই অংশের জন্য, এবং আবার, এটি চ্ছিক। এই বৈশিষ্ট্য ছাড়া ওয়েবসাইট এই মুহুর্তে সম্পূর্ণ কার্যকরী। এখানে এটি দেখতে কেমন হবে (দ্রুত গতিতে):

তিনটি বৈশিষ্ট্যযুক্ত ছবি অন্তর্ভুক্ত করতে আপনার HTML পরিবর্তন করুন। লক্ষ্য করুন কিভাবে এই দুটি একটি CSS ক্লাস আছে গোপন । প্রতিটি চিত্রকে একটি আইডি দেওয়া হয়েছে যাতে জাভাস্ক্রিপ্ট তাদের প্রত্যেককে স্বাধীনভাবে টার্গেট করতে পারে।







অতিরিক্ত বৈশিষ্ট্যযুক্ত ছবিগুলি লুকানোর জন্য এখানে CSS প্রয়োজন:

.hidden {
display: none;
}

এখন যেহেতু HTML এবং CSS এর যত্ন নেওয়া হয়েছে, আসুন জাভাস্ক্রিপ্টে চলে যাই। এই অংশের জন্য ডকুমেন্ট অবজেক্ট মডেল (DOM) বোঝার জন্য এটি দরকারী, কিন্তু এটি একটি প্রয়োজনীয়তা নয়।

খোঁজো লিপি পৃষ্ঠার নীচে এলাকা:


/* JavaScript goes here, at the bottom of the page */


এর ভিতরে নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন লিপি ট্যাগ:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

এখানে কিছু ঘটনা ঘটছে। কোডটি ভিতরে রয়েছে $ (ডকুমেন্ট)। প্রস্তুত () । এর মানে হল আপনার ব্রাউজার পৃষ্ঠাটি রেন্ডার করা শেষ হলে এটি চলবে - এটি একটি ভাল অভ্যাস। দ্য setInterval () ফাংশন কল করতে ব্যবহৃত হয় পরিবর্তন চিত্র () মিলিসেকেন্ডে একটি পূর্বনির্ধারিত ব্যবধানে নিয়মিত কাজ করুন (1000 মিলিসেকেন্ড = 1 সেকেন্ড)। এই মধ্যে সংরক্ষিত হয় সময় পরিবর্তনশীল স্ক্রোলিংকে গতি বা ধীর করতে আপনি এটি বৃদ্ধি বা হ্রাস করতে পারেন। অবশেষে, একটি সাধারণ কেস স্টেটমেন্ট বিভিন্ন ছবি দেখানোর জন্য ব্যবহার করা হয়, এবং বর্তমানে প্রদর্শিত ইমেজের উপর নজর রাখা।

কোডিং চ্যালেঞ্জ

এটাই! আশা করি আপনি প্রক্রিয়া চলাকালীন অনেক কিছু শিখেছেন। যদি আপনি একটি চ্যালেঞ্জ পছন্দ করেন, এবং আপনার নতুন পাওয়া দক্ষতা পরীক্ষা করতে চান, তাহলে কেন এই পরিবর্তনগুলি বাস্তবায়নের চেষ্টা করবেন না:

একটি পাদলেখ যোগ করুন: পাদলেখের মধ্যে কিছু পাঠ্য যুক্ত করুন (ইঙ্গিত: আপনি এটি পুনরায় ব্যবহার করতে পারেন স্বাভাবিক মোড়ক এবং এক-তৃতীয়াংশ/দুই-তৃতীয়াংশ ক্লাস।)।

ইমেজ স্ক্রোলিং উন্নত করুন: ইমেজ পরিবর্তনগুলি অ্যানিমেট করতে জাভাস্ক্রিপ্ট পরিবর্তন করুন (ইঙ্গিত: jQuery দেখুন বিবর্ণ এবং অ্যানিমেটেড )।

একাধিক উদ্ধৃতি বাস্তবায়ন করুন: বিভিন্ন বিভিন্নগুলির মধ্যে একটিতে পরিবর্তন করতে উদ্ধৃতিগুলি সংশোধন করুন (ইঙ্গিত: একটি প্রারম্ভিক বিন্দুর জন্য চিত্র স্ক্রোলিং কোডটি দেখুন)।

একটি সার্ভার সেটআপ করুন: একটি সার্ভার সেটআপ করুন এবং ওয়েবপেজ এবং সার্ভারের মধ্যে ডেটা পাঠান (ইঙ্গিত: JSON এবং Python- এর জন্য আমাদের নির্দেশিকা পড়ুন)।

12 প্রো সর্বোচ্চ বনাম 12 প্রো

একবার আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে স্বাচ্ছন্দ্যবোধ করেন বা আপনার যদি রুবি সম্পর্কে কোন অভিজ্ঞতা থাকে, তাহলে আপনি GatsbyJS বা Jekyll এর মত একটি স্ট্যাটিক ওয়েবসাইট নির্মাতার সাথে একটি ওয়েবসাইট তৈরির জন্য আপনার হাত চেষ্টা করতে পারেন।

শেয়ার করুন শেয়ার করুন টুইট ইমেইল আপনার উইন্ডোজ 10 ডেস্কটপের চেহারা এবং অনুভূতি কীভাবে পরিবর্তন করবেন

উইন্ডোজ 10 কে আরও সুন্দর করে তোলার জন্য জানতে চান? উইন্ডোজ 10 কে আপনার নিজের করার জন্য এই সাধারণ কাস্টমাইজেশনগুলি ব্যবহার করুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• এইচটিএমএল
• ওয়েব ডিজাইন
• সিএসএস

লেখক সম্পর্কে জো কোবার্ন(136 নিবন্ধ প্রকাশিত)

জো যুক্তরাজ্যের লিংকন বিশ্ববিদ্যালয় থেকে কম্পিউটার বিজ্ঞানে স্নাতক। তিনি একজন পেশাদার সফটওয়্যার ডেভেলপার, এবং যখন তিনি ড্রোন উড়াচ্ছেন না বা সঙ্গীত লিখছেন না, তখন তাকে প্রায়ই ফটো তুলতে বা ভিডিও তৈরি করতে দেখা যায়।

জো কোবার্ন থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন