পিএসডি টু এইচটিএমএল পূর্ণাঙ্গ কোর্স – ২য় পর্ব (টুইটার বুটস্ট্রাপ ও ফন্ট এওয়াসাম এর ব্যাবহার)

পিএসডি টু এইচটিএমএল পূর্ণাঙ্গ কোর্স – ২য় পর্ব (টুইটার বুটস্ট্রাপ ও ফন্ট এওয়াসাম এর ব্যাবহার)

সফটনেট বিডির পক্ষ থেকে পূর্ণাঙ্গ পিএসডি টু এইচটিএমএল চেইন টিউন কোর্সের ২য় পর্বে সবাইকে স্বাগতম। গত পর্বে আমরা আমাদের পিএসডি থেকে এইচটিএমএলএ ব্যাবহার করতে হবে এমন ইমেজ গুলো কেটে আলাদা আলাদা ইমেজ হিসেবে সেভ করেছিলাম। আমরা যেহেতু আমাদের পিএসডি টেমপ্লেটটিকে রেস্পন্সিভ করার জন্য বুটস্ট্রাপ ব্যাবহার করবো এবং আইকন হিসেবে ফন্ট এওয়াসাম ব্যাবহার করবো তাই আমরা আজকে দেখে নেবো কিভাবে আমরা আমাদের প্রজেক্টে এই দুটো জিনিস ব্যাবহার করবো।

ওয়েব প্রোজেক্টে বহুল ব্যাবহৃত কিছু সিএসএস এবং জেকুয়েরি প্লাগিন আছে যার মধ্যে টুইটার বুটস্ট্রাপ এবং ফন্ট আওয়াসাম উল্লেখযোগ্য।

টুইটার বুটস্ট্রাপ কি?

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

ফন্ট এওয়াসাম কি?

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

এবার চলুন আমরা এই দুইটার ব্যাবহার কিভাবে করতে হবে তা দেখি।

প্রথমে দেখে নিন কিভাবে আমরা আমাদের এইচটিএমএল ফাইল শুরু করবো। আমরা প্রথমে আমাদের প্রোজেক্ট ডিরেক্টরিতে index.html নামে একটা ফাইল করবো এবং তা কোড এডিটর (আমি bracket ব্যাবহার করি) দিয়ে ওপেন করে নিচের কোডটুকু লিখবোঃ

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>FOCUL Resume HTML</title>
    </head>
    <body>
        This is body content
    </body>
</html>

এখানে head এর মধ্যে আমাদের ওয়েব সাইট এর অদৃশ্যমান কিন্তু সংশ্লিষ্ট তথ্যগুলো থাকবে। যেমন এই মুহূর্তে সেখানে আমাদের ওয়েব সাইটের টাইটেল (title) ‘FOCUL Resume HTML’ বর্তমান যা ব্রাউজার এর টাইটেলবারে দেখা যাবে। আর body এর মধ্যে থাকবে ওয়েবসাইটের দৃশ্যমান অংশগুলো। এখন সেখানে আছে ‘This is body content’।

এবার আমরা প্রথমে এখানে গিয়ে টুইটার বুটস্ট্রাপ ডাউনলোড করবো। ডাউনলোড করতে গেলে ৩টা অপশন পাবেন। Bootstrap, Source Code এবং Sass । প্রথমটা অর্থাৎ Bootstrap ডাউনলোড করুন। আনজিপ করলে এর ভিতর তিনটা ফোল্ডার পাবে। এবার এই তিনটা ফোল্ডার আমাদের প্রজেক্টে ইনক্লুড করার পালা। এইগুলোকে কপি করে আমাদের প্রজেক্ট ফোল্ডারে নিয়ে আসুন আর index.html এবং images ফোল্ডারের সাথে রাখুন।

টুইটার বুটস্ট্রাপ এর ব্যাবহার

টুইটার বুটস্ট্রাপ এর ব্যাবহার

 

এখন আমাদের index.html একটা সিএসএস এবং একটা জাভাস্ক্রিপ্ট দুইটা ফাইল যুক্ত করলেই আমাদের কাজ শেষ। সিএসএস ফাইল যুক্ত করার জন্য link আর জেএস(জাভাস্ক্রিপ্ট) ফাইল যুক্ত করার জন্য script ট্যাগ ব্যাবহার করবো। নিচের মত করেঃ

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>FOCUL Resume HTML</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/><!--Adding Bootsrap CSS-->
    </head>
    <body>
        
        
        
        
        <script src="js/bootstrap.min.js"></script><!--Adding Bootstrap JS-->
    </body>
</html>

খেয়াল করুন আগের কন্টেন্টের সাথে আমরা এখানে দুইটা নতুন লাইন যুক্ত করেছি। একটি হচ্ছে head এর ভিতর আরেকটি body শেষ হওয়ার আগে। এরা হচ্ছে যথাক্রমে বুটস্ট্রাপ এর সিএসএস ফাইল কলিং এবং আরেকটি হচ্ছে বুটস্ট্রাপের জেএস ফাইল কলিং। সিএসএস ফাইলটিতে আছে বুস্ট্রাপ এর স্টাইলগুলো আর জেএস ফাইলটি হচ্ছে এইচটিএমএল এ যেই বুটস্ট্রাপ জাভাস্ক্রিপ্ট কম্পোনেন্টগুলো ব্যাবহার করবো সেইগুলো এক্টিভ করার জন্য। দুইটি লাইনের পাশেই আমি <!– এবং –> এর মাঝে যেই লেখা গুলো দিয়েছি ব্রাউজারের কাছে এইগুলোর কোন ভেলু নেই। এইগুলো হচ্ছে কমেন্ট যেটা কোডার ব্যাবহার করে অন্য কোডার বা এই টেম্পলেট এর ব্যাবহারকারী যাতে বুজতে পারে কোন কোডগুলো কিসের জন্য। যেমন এখানে আমি আপনাদের বুঝার সুবিধার্থে এইগুলো দিলাম।

টুইটার বুটস্ট্রাপ যুক্ত করার কাজ শেষ এখন আমরা ফন্ট এওয়াসাম যুক্ত করবো। Font Awesome এর সাইটে গিয়ে একই ভাবে ফন্ট এওয়াসাম ডাউনলোড করে আনজিপ করে প্রজেক্টের রুট ডিরেক্টরিতে রাখুন। ফন্ট এওয়াসাম থেকে আমাদের কোন জেএস ফাইল কল করা লাগবে না। শুধু ফন্ট এওয়াসামের ভিতর css ফোল্ডারের মধ্যে থাকা font-awesome.min.css ফাইলটি আগের সিএসএস এর মত এইচটিএমএল এ কল করে দিতে হবে। অর্থাৎ বুটস্ট্রাপ এর যেই bootstrap.min.css ফাইলটি কল করেছিলেন তার নিচে এই লাইনটা যুক্ত করে দিনঃ

<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>

এখন আপনি যদি আপনার ফন্ট এওয়াসাম ফোল্ডারের নাম দেন my-awesome-font তাহলে কিন্তু href এর লিংকটিও হবে my-awesome-font/css/font-awesome.min.css

এখন আসেন, টুইটার বুটস্ট্রাপ একটিভ করার জন্য আমরা bootstrap.min.js নামে যেই ফাইলটি যুক্ত করেছিলাম এই ধরনের কিছু জেএস ফাইল আছে যেইগুলো আসলে জেকুয়েরি দিয়ে কাজ করে। জেকুয়েরি হচ্ছে এমন একটি জেএস প্লাগিন যেটা যুক্ত করার পর আপনার টেম্পলেট এ জাভাস্ক্রিপ্ট ব্যাবহার অনেক সহজ হয়ে যায়। বিশেষ করে আপনি যখন কোন এইচটিএমএল ক্লাস বা আইডি নিয়ে কাজ করতে যান তখন এটি এই এলিমেন্ট গুলোকে সেলেক্ট করার কাজ অনেক সহজ করে দেয়। তবে এটার সবথেকে গুরুত্ব সেইসব জেএস প্লাগিন ব্যাবহারের জন্য যেইগুলো ব্যাবহার করতে জেকুয়েরি লাগবেই। এখন কথা হচ্ছে আমরা এই জেকুয়েরি কোথায় পাবো।

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

jquery এর ওয়েবসাইটে গেলে আপনি জেকুয়েরি এর একাধিক ভার্সন দেখতে পাবেন। এর যেকোনো আপনি ডাউনলোড করে ব্যাবহার করতে পারেন। তবে আমরা সবথেকে আপডেট কিন্তু স্ট্যাবল ভার্সন ব্যাবহার করবো। তার জন্য আমরা এখানে যেতে হবেঃ

code.jquery.com/jquery.min.js

জেকুয়েরি এর সবথেকে আপডেট এবং স্ট্যাবল ভার্সনটি এখানে প্রদর্শিত হবে। পুরো পেজটি আমাদের টেম্পলেট ডিরেক্টরির মধ্যে js ফোল্ডারে সেভ করে রাখবেন। এখন আমরা আমাদের আগের জেএসটি কল করার মতই এটিকে body শেষ হওয়ার আগে কল করবো। তবে এই ফাইলটি অবশ্যই আগের জেএস এমনকি যেকোনো জেকুয়েরি প্লাগিন এর আগে কল করতে হবে। কারন যদি কোন জেকুয়েরি প্লাগিন জেকুয়েরি লোড হওয়ার আগে লোড হয় তাহলে সেটি কাজ করবে না। কারন সেটি একটিভ হওয়ার জন্য জেকুয়েরিকে খোঁজ করবে। তো চলুন নিচের কোডের মাধ্যমে আমরা আমাদের জেকুয়েরি কল করিঃ

<script src="js/jquery.min.js"></script>

টুইটার বুটস্ট্রাপ আর ফন্ট এওয়াসাম যুক্ত করার কাজ শেষ। আর সাথে সাথে শেষ আজকের পোস্টটিও। আজকের সব কাজ শেষ করার পর আমাদের index.html পুরো ফাইলটি নিম্নরূপঃ

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>FOCUL Resume HTML</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/><!--Adding Bootsrap CSS-->
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
    </head>
    <body>
        
        
        
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script><!--Adding Bootstrap JS-->
    </body>
</html>

ভালোভাবে বুঝার জন্য নিচের টিউটোরিয়াল ভিডিওটি দেখুন।

Leave a Reply

Your email address will not be published. Required fields are marked *