কিভাবে HTML5 বয়লারপ্লেট ব্যবহার করে মিনিটে একটি ওয়েবসাইট তৈরি করবেন

যখন আপনি একটি নতুন ওয়েবসাইট তৈরি করছেন, আজকাল আপনি এটি HTML5- সামঞ্জস্যপূর্ণ হতে চান। কিন্তু আপনি শুরু থেকে HTML5 এর জটিলতা শিখতে অপ্রয়োজনীয় সময় ব্যয় করতে চান না, তাই না?

সৌভাগ্যবশত, HTML5 বয়লারপ্লেট টেমপ্লেট সাহায্য করতে পারি. এটি একটি সাধারণ ফ্রন্ট-এন্ড টেমপ্লেট যা আপনি মাত্র কয়েক মিনিটের মধ্যে একটি HTML5 ওয়েবসাইট তৈরি করতে ব্যবহার করতে পারেন। তবে এটি যথেষ্ট শক্তিশালী যে আপনি এটি একটি জটিল, সম্পূর্ণ বৈশিষ্ট্যযুক্ত সাইটের ভিত্তি হিসাবে ব্যবহার করতে পারেন।

কিভাবে পিএস 2 নিয়ামককে পিসিতে সংযুক্ত করবেন

এই HTML5 বয়লারপ্লেট টিউটোরিয়ালটি টেমপ্লেটে যা আসে, সেগুলি কীভাবে ব্যবহার করতে হয়, এবং আরও শেখার জন্য কিছু সম্পদ সম্পর্কে জানতে হবে। আমি আপনাকে দেখাবো কিভাবে আমি HTML এর মাত্র কয়েকটি লাইন দিয়ে একটি খুব মৌলিক সাইট তৈরি করতে টেমপ্লেটটি ব্যবহার করেছি।

HTML5 বয়লারপ্লেট টেমপ্লেট

যখন আপনি HTML5 বয়লারপ্লেট থেকে টেমপ্লেটটি ডাউনলোড করেন, তখন আপনি বেশ কয়েকটি ফোল্ডার এবং ফাইল পাবেন। এখানে জিপ ফাইলের বিষয়বস্তু রয়েছে:

css  
---main.css  
---normalize.css  
doc  
img  
js  
---main.js  
---plugins.js  
---vendor  
 ---jquery.min.js  
 ---modernizr.min.js  
.editorconfig  
.htaccess  
404.html  
browserconfig.xml  
favicon.ico  
humans.txt  
icon.png  
index.html  
robots.txt  
site.webmanifest  
tile.png  
tile-wide.png

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

HTML5 বয়লারপ্লেট সাহায্য ডকুমেন্টেশন

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

ডকুমেন্টেশনের প্রায় সবকিছুই টেমপ্লেটের ডক ফোল্ডারে অন্তর্ভুক্ত। আপনি বেশ কয়েকটি মার্কডাউন (.md) ফাইল দেখতে পাবেন যা আপনার বয়লারপ্লেট সাইটটি কীভাবে তৈরি করা যায় তা খুঁজে বের করতে একটি বড় সাহায্য।

আপনি যদি সব কিছু পড়তে চান, তাহলে TOC.md দিয়ে শুরু করুন এবং সেখান থেকে অন্যান্য মার্কডাউন ফাইলগুলির লিঙ্কগুলি অনুসরণ করুন। যদি আপনি একটি নির্দিষ্ট বিষয়ে সাহায্য খুঁজছেন, তাহলে ফাইলটি খুঁজে পান যে এটি সম্পর্কিত হতে পারে; use.md শুরু করার জন্য একটি ভাল জায়গা।

HTML5 বয়লারপ্লেটের CSS দিয়ে শুরু

HTML5 বয়লারপ্লেট টেমপ্লেট দুটি CSS ফাইল নিয়ে আসে: main.css এবং normalize.css।

দ্বিতীয় ফাইল, normalize.css, বিভিন্ন ব্রাউজারকে সামঞ্জস্যপূর্ণ উপায়ে উপাদান রেন্ডার করতে সাহায্য করে। এটি কীভাবে কাজ করে সে সম্পর্কে আরও জানতে, দেখুন GitHub এ normalize.css প্রকল্প ।

এদিকে, main.css হল যেখানে আপনি যে কোন কোড রাখবেন যা আপনার প্রয়োজন CSS দিয়ে আপনার সাইট ফরম্যাট করুন । টেমপ্লেটের সাথে অন্তর্ভুক্ত স্ট্যান্ডার্ড CSS হল ডেভেলপার এবং HTML5 বয়লারপ্লেট সম্প্রদায়ের দ্বারা পরিচালিত গবেষণার ফলাফল। এটি পাঠযোগ্য এবং বিভিন্ন ব্রাউজারে সুন্দরভাবে প্রদর্শন করে।

আপনি যদি নিজের সিএসএস যোগ করতে চান তবে আপনি এটি লেখকের কাস্টম স্টাইল বিভাগে যোগ করতে পারেন। আমি আমাদের উদাহরণ পৃষ্ঠার জন্য লিঙ্ক স্টাইলিং একটি বিট যোগ করব:

বেস সিএসএস -এর অন্তর্ভুক্ত বেশ কয়েকটি দরকারী সহায়ক ক্লাসও রয়েছে। তাদের মধ্যে কিছু স্ট্যান্ডার্ড ব্রাউজার এবং স্ক্রিন রিডার (অথবা কিছু সমন্বয়) থেকে আইটেম লুকিয়ে রাখে।

এছাড়াও main.css এ আপনি প্রতিক্রিয়াশীল নকশা এবং সহায়ক মুদ্রণ সেটিংসের জন্য সমর্থন পাবেন।

এই সমস্ত আইটেম CSS- এ মন্তব্য দ্বারা স্পষ্টভাবে ব্যাখ্যা করা হয়েছে:

সাধারণভাবে, আপনি বেস CSS দিয়ে শুরু করতে পারেন।

টেমপ্লেটে আপনার নিজস্ব HTML যোগ করা

বয়লারপ্লেটে দুটি HTML ফাইল রয়েছে: 404.html এবং index.html।

সূচী পাতা যেখানে আপনি আপনার হোমপেজ তৈরি করবেন (অথবা আপনার একমাত্র পৃষ্ঠা, যদি আপনি একটি সাধারণ এক-পেজারের জন্য যাচ্ছেন)।

আপনি যদি একটি ব্রাউজারে সূচী পাতা খুলেন, আপনি একটি একক পাঠ্য দেখতে পাবেন। কিন্তু এইচটিএমএল -এ খুঁজলে কোডের মধ্যে অনেক বেশি লুকিয়ে থাকে। পরিবর্তনের বিষয়ে আপনাকে সত্যিই যে জিনিসটি চিন্তিত করতে হবে তা হল গুগল অ্যানালিটিক্স কোড ('UA-XXXXX-Y' পাঠ্যটি খুঁজুন এবং এটি আপনার নিজের ট্র্যাকিং কোড দিয়ে প্রতিস্থাপন করুন)।

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

ইতিমধ্যেই তাদের পূর্ব-জনসংখ্যা থাকা, তবে এটি নিশ্চিত করার একটি ভাল উপায় যে আপনার সাইটটি HTML5 থেকে সর্বাধিক লাভের জন্য প্রস্তুত।

আপনার পৃষ্ঠা তৈরি করতে, ফাইলের ট্যাগগুলির মধ্যে আপনার HTML োকান। এখানে কিছু মৌলিক তথ্য যা আমি নিজের সম্পর্কে যোগ করব:

আরো পৃষ্ঠা তৈরি করতে চান? এই ফাইলের অনুলিপি তৈরি করুন এবং তাদের নতুন নাম দিন যাতে আপনাকে সমস্ত HTML কপি এবং পেস্ট করতে না হয়। তারপর আপনার কন্টেন্ট যোগ করুন।

আপনি যদি আপনার 404 পৃষ্ঠাটি কাস্টমাইজ করতে চান তবে কেবল HTML ফাইলটি পরিবর্তন করুন। আপনার 404 পৃষ্ঠায় কী রাখবেন তা নিশ্চিত নন? এই মহান 404 পৃষ্ঠার নকশা উদাহরণ দেখুন।

একটি ফ্যাভিকন যোগ করা (এবং অন্যান্য আইকন)

আপনার ফেভিকন প্রতিস্থাপন করতে চান? তারপর favicon.ico হল ফাইলটি আপনাকে প্রতিস্থাপন করতে হবে।

যদি আপনার এখনও না থাকে, তাহলে আপনাকে একটি তৈরি করতে হবে। আপনি একটি অনলাইন ফেভিকন জেনারেটর ব্যবহার করতে পারেন অথবা আপনার নিজের ডিজাইন করতে পারেন। শুধু নিশ্চিত করুন যে এটি 16 x 16 পিক্সেল এবং .ico ফাইল টাইপ আছে।

আমার ফোনের ইন্টারনেট স্লো কেন?

আপনার ফেভিকনে কিছু চিন্তা করা ভাল ধারণা। আপনার মস্তিষ্কের গতিবিধির জন্য এই বিখ্যাত ফ্যাভিকনগুলি ব্যবহার করুন। নিশ্চিত করুন যে যখন আপনি নতুন ফেভিকন যোগ করেন তখন এটি favicon.ico নামে পরিচিত।

আপনি লক্ষ্য করতে পারেন যে আপনার সাইটের রুট ডিরেক্টরিতে আরও তিনটি ছবি রয়েছে: icon.png, tile.png, এবং tile-wide.png। এগুলো কিসের জন্য?

icon.png অ্যাপল টাচ আইকনের জন্য ব্যবহৃত হয়। আপনি যদি একটি ওয়েব অ্যাপ তৈরি করেন, এই আইকনটি ব্যবহার করা হবে যখন কোনো আইফোন বা আইপ্যাড ব্যবহারকারী তাদের হোমস্ক্রিনে অ্যাপটি যুক্ত করবে।
tile.png এবং tile-wide.png উইন্ডোজ 'পিন' কার্যকারিতার জন্য, এবং উইন্ডোজ 10 এ প্রদর্শিত হবে।

এই সমস্ত ক্ষেত্রে আইকন সরবরাহ করা একটি ভাল ধারণা --- কিন্তু আপনি যদি কোনও ওয়েব অ্যাপ তৈরি না করেন তবে এটি কম অগ্রাধিকার হতে পারে।

আরও কার্যকারিতা যোগ করা

একবার আপনি আপনার এইচটিএমএল এবং একটি ফেভিকন যোগ করেছেন (সেইসাথে যে কোন সিএসএস আপনি অন্তর্ভুক্ত করতে চাইতে পারেন), আপনার সাইটটি প্রকাশের জন্য প্রস্তুত। HTML5 বয়লারপ্লেট ব্যবহার করা কত সহজ। আপনার সার্ভারে এটি আপলোড করুন, এবং আপনার কাজ শেষ!

আমাদের পৃষ্ঠাটি কেমন দেখাচ্ছে তা এখানে:

আপনি দেখতে পাচ্ছেন, পাঠ্যের মাত্র কয়েকটি লাইন একটি সম্পূর্ণ কার্যকরী (যদি কিছুটা নরম) ওয়েবসাইট তৈরি করে। এটি খুব বেশি নয়, তবে এটি মাত্র কয়েক মিনিট সময় নিয়েছে। এবং এটি HTML5 এর সাথে অত্যন্ত এক্সটেনসিবল। এটি বয়লারপ্লেট টেমপ্লেটের শক্তি।

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

যদি আপনি নিশ্চিত না হন যে আপনি HTML5 দিয়ে কি করতে পারেন, কিন্তু আপনি জানতে চান, সেখানে আপনাকে সাহায্য করার জন্য প্রচুর ওয়েব ডিজাইন টিউটোরিয়াল আছে।

শেয়ার করুন শেয়ার করুন টুইট ইমেইল অসঙ্গত পিসিতে উইন্ডোজ 11 ইনস্টল করা কি ঠিক?

আপনি এখন অফিসিয়াল আইএসও ফাইল দিয়ে পুরোনো পিসিতে উইন্ডোজ 11 ইনস্টল করতে পারেন ... কিন্তু এটি করা কি একটি ভাল ধারণা?

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

প্রোগ্রামিং
HTML5
কোডিং টিউটোরিয়াল

লেখক সম্পর্কে তারপর আলব্রাইট(506 নিবন্ধ প্রকাশিত)

ড্যান একটি বিষয়বস্তু কৌশল এবং বিপণন পরামর্শক যিনি কোম্পানিকে চাহিদা এবং নেতৃত্ব তৈরি করতে সহায়তা করেন। তিনি dannalbright.com এ কৌশল এবং বিষয়বস্তু বিপণন সম্পর্কে ব্লগ করেন।

ড্যান আলব্রাইট থেকে আরো

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

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

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