HTML5 দিয়ে শুরু করুন

HTML5 দিয়ে শুরু করুন
এই গাইডটি বিনামূল্যে পিডিএফ হিসাবে ডাউনলোড করার জন্য উপলব্ধ। এখনই এই ফাইলটি ডাউনলোড করুন । আপনার বন্ধুদের এবং পরিবারের সাথে এটি অনুলিপি করুন এবং ভাগ করুন।

সুচিপত্র

§1। পরিচিতি





§2 – শব্দার্থিক মার্কআপ



-3 – ফর্ম





§4 - মাঝারি

§5 – CSS3 রূপান্তর এবং অ্যানিমেশন



-6 – শুধু যথেষ্ট জাভাস্ক্রিপ্ট

-7 – ক্রিয়েটিভ ক্যানভাস



-8 Next পরবর্তী কোথায়?

1। পরিচিতি

আপনি এটি সম্পর্কে শুনেছেন: HTML5। সবাই এটা ব্যবহার করছে। এটি ইন্টারনেটের ত্রাণকর্তা হিসাবে প্রচারিত হচ্ছে, যা মানুষকে ফ্ল্যাশ এবং শকওয়েভ ব্যবহার না করে সমৃদ্ধ, আকর্ষক ওয়েব পেজ তৈরি করতে দেয়।



কিন্তু এটা আসলে কি?

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

এইচটিএমএল 5 সব এবং আরও অনেক কিছু। তাহলে এই বইটি কী?

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

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

আপনি কেন HTML5 শিখতে চান?

এটা একটা ন্যায্য প্রশ্ন। স্মার্টফোন এবং অ্যাপের জগতে, ওয়েব পৃষ্ঠাগুলি কীভাবে প্রোগ্রাম করা যায় তা শেখা কি সত্যিই গুরুত্বপূর্ণ?

আচ্ছা, বিশ্বাস করুন বা না করুন, HTML5 প্রযুক্তি ব্যবহার করে স্মার্টফোন অ্যাপ্লিকেশন লেখা সত্যিই সাধারণ। সম্প্রতি পর্যন্ত, অ্যান্ড্রয়েডের জন্য ফেসবুক অ্যাপটি HTML5, CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে লেখা হয়েছিল।

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

নতুন ফায়ারফক্স ওএস স্মার্টফোন সম্পূর্ণভাবে HTML5 অ্যাপেও চলে। আজকের স্মার্টফোন আবহাওয়ায় HTML5 এর একটি কার্যকরী জ্ঞান অপরিহার্য।

এছাড়াও, HTML5 শেখা আপনার ক্যারিয়ারের জন্য ভাল। আমাকে বিশ্বাস করবেন না? প্রকৃতপক্ষে। Com অনুযায়ী , HTML5 ডেভেলপারের গড় বার্ষিক বেতন $ 89,000। এইচটিএমএল 5 প্রযুক্তি ব্যবহার করার জন্য আরো বেশি সংখ্যক কোম্পানি তাদের ওয়েবসাইট পরিবর্তন করে, এইচটিএমএল 5 স্ট্যাক জানেন এমন ডেভেলপারদের খোঁজ করা হয় - এখন আগের চেয়ে অনেক বেশি।

1.1 পূর্বশর্ত

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

ট্যাগগুলি খুব ভয়ঙ্কর নয়, এবং আপনি কিছু সোর্স কোডে আপনার হাত নোংরা হতে ভয় পান না।

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

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

সেই নির্দেশিকাটি পড়ার পরে, আপনি নিম্নলিখিত নিবন্ধগুলিও দেখতে চাইতে পারেন:

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

ফলস্বরূপ, আপনি একটি আধুনিক ব্রাউজার ডাউনলোড করতে উৎসাহিত হচ্ছেন। আমি গুগল ক্রোম সুপারিশ করি, এবং আমি এটি প্রতিটি উদাহরণে ব্যবহার করব।

এর বাইরে, আপনার যা যা দরকার তা হল শেখার ইচ্ছা। ওহ, এবং একটি পাঠ্য সম্পাদক।

1.2 ওয়েব ডেভেলপমেন্টের জন্য টেক্সট এডিটর

আপনার টেক্সট এডিটর আপনি আপনার কোড লিখতে ব্যবহার করতে যাচ্ছেন। আপনি হয়তো ভাবছেন টেক্সট এডিটর কি।

আচ্ছা, প্রথমত এটি একটি ওয়ার্ড প্রসেসর নয়। মাইক্রোসফট ওয়ার্ড এবং অ্যাপলের পেজের মতো প্রোগ্রাম ওয়েব ডেভেলপমেন্টের জন্য সম্পূর্ণ অনুপযুক্ত। এর কারণ হল যে তারা আপনার HTML, CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলির সাথে অতিরিক্ত তথ্য সংযুক্ত করে যা আপনার ওয়েব ব্রাউজারের পড়া কঠিন করে তোলে।

একটি টেক্সট এডিটর একটি টেক্সট ফাইলে অক্ষর অঙ্কুর করে, এবং অন্য কিছু নয়। এটি আপনাকে এমন ফাইলগুলি তৈরি করতে দেয় যার কোনও অতিরিক্ত বিন্যাস নেই এবং আপনার পছন্দের যে কোনও এক্সটেনশনের সাথে সংরক্ষণ করা যেতে পারে।

আপনার কম্পিউটার ইতিমধ্যেই একটি নিয়ে এসেছে। আপনি যদি একটি উইন্ডোজ পিসি ব্যবহার করেন, তাহলে নোটপ্যাড হল পাঠ্য সম্পাদক যা আপনি সম্ভবত ইনস্টল করেছেন।

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

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

লিনাক্সে, ডিফল্ট পাঠ্য সম্পাদক বিতরণের মধ্যে পরিবর্তিত হয়। উবুন্টুতে, এটি সম্ভবত গেডিট, যা একটি বরং মনোরম পাঠ্য সম্পাদক যা নোটপ্যাড থেকে খুব আলাদা নয়।

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

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

তৃতীয়টি হল জাভাস্ক্রিপ্ট কনসোল যা গুগল ক্রোমে নির্মিত। এটি আমাদের জাভাস্ক্রিপ্ট লেখার অনুমতি দেয় এবং এটি অবিলম্বে চালানো হচ্ছে এবং প্রাথমিক প্রোগ্রামিং ধারণাগুলি ব্যাখ্যা করতে ব্যবহার করা হবে।

দ্বিতীয়টি হল Codepen.io নামে একটি ওয়েবসাইট। এই অসাধারণ ওয়েবসাইটটি আপনাকে ব্রাউজারে HTML, CSS এবং জাভাস্ক্রিপ্ট কোড করার অনুমতি দেবে এবং এটি বিনামূল্যে ব্যবহার করা যাবে। এটি আপনাকে তাত্ক্ষণিকভাবে আপনার পরিবর্তনগুলি দেখতে দেবে।

2. শব্দার্থিক মার্কআপ

এই অধ্যায়ে, আপনি সেমান্টিক মার্কআপ সম্পর্কে জানতে পারবেন, এবং কিভাবে আপনার কোড এর বিষয়বস্তুর উপর ভিত্তি করে সংগঠিত করবেন।

সম্প্রতি পর্যন্ত, এইচটিএমএল কোডটি সাধারণত ট্যাগ দিয়ে সংগঠিত ছিল। এগুলি আপনাকে উপাদানগুলির একটি গ্রুপ তৈরি করতে এবং তারপরে সেই উপাদানগুলিতে স্টাইলিং প্রয়োগ করতে দেয়।

এটি কাজ করেছিল, কিন্তু উন্নতির জন্য জায়গা ছিল। ট্যাগগুলির সমস্যাটি ছিল এটি শব্দার্থিক নয়। ডিভ আসলে কিছু মানে না, সত্যিই।

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

সুতরাং, তারা কিভাবে কাজ করে? নিম্নলিখিত কোড বিবেচনা করুন।

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

প্লেস্টেশন নেটওয়ার্ক পাসওয়ার্ড রিসেট কাজ করছে না

আসুন MakeUseOf- এ একটি নিবন্ধ দেখি। আপনি লক্ষ্য করবেন যে পৃষ্ঠার একটি অংশ রয়েছে যা সম্পূর্ণরূপে অন্যান্য নিবন্ধগুলিতে নেভিগেট করার জন্য সংরক্ষিত। আপনি এটিও লক্ষ্য করবেন যে পৃষ্ঠার আরেকটি অংশ রয়েছে যেখানে একটি নিবন্ধ গঠন করে এমন শব্দ রয়েছে। পৃষ্ঠার উপরের দিকে, আপনি MakeUseOf লোগো এবং কিছু অন্যান্য লিঙ্ক সহ একটি শিরোনাম দেখতে পাবেন।

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

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

সুতরাং, মনে রাখবেন যে কোডটি আমাদের আগে ছিল? আসুন আমরা কিছু সেমেটিক মার্কআপ যুক্ত করে দেখি।

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

সুতরাং, আসুন আরো কিছু অর্থসূচক মার্কআপ ট্যাগ দেখি।

2.1 বিভাগ

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

2.2 ধারা

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

2.3 পাশাপাশি

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

2.4 হেডার

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

2.5 Nav

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

এই ট্যাগটি পৃষ্ঠার নিচের অংশের জন্য সংরক্ষিত। এখানে, আপনি আপনার 'আমার সম্পর্কে' পৃষ্ঠায় কিছু যোগাযোগের বিবরণ, কপিরাইট তথ্য, একটি মানচিত্র বা কিছু লিঙ্ক রাখতে পারেন।

2.7 নিজেকে পরীক্ষা করুন

  • শব্দার্থিক মার্কআপ কি এবং এটি কি জন্য ব্যবহার করা হয়?
  • আমি একটি ওয়েব পেজ তৈরি করছি এবং আমি আমার সম্পর্কে একটি জীবনী ধারণ করার জন্য একটি শব্দার্থিক ট্যাগ ব্যবহার করতে চাই। আমি কোনটি ব্যবহার করব?

3. ফর্ম

আপনি যদি কখনও ওয়েব ডিজাইন করেছেন, আপনি সম্ভবত জানেন কিভাবে HTML এ একটি সাধারণ ফর্ম তৈরি করতে হয়। আপনি যদি সত্যিই চতুর হন, আপনি সম্ভবত জানেন যে আপনার ফর্ম থেকে প্রাপ্ত তথ্য কীভাবে নিতে হয় এবং কীভাবে এটি দিয়ে কিছু করতে হয়, যেমন এটি একটি ডাটাবেসে রাখুন।

ফর্ম ব্যাপকভাবে গুরুত্বপূর্ণ। তারা ইন্টারনেটে আমরা যা করি তার বেশিরভাগের ভিত্তি। প্রতিবার যখন আপনি আপনার প্রিয় সামাজিক নেটওয়ার্কের উপর একটি স্ট্যাটাস আপডেট তৈরি করেন, আমাজন থেকে কিছু কিনুন অথবা একটি ইমেল পাঠান, আপনি সম্ভবত একটি HTML ফর্ম ব্যবহার করেছেন।

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

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

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

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

3.1 একটি ফর্ম উন্নত করা

সুতরাং, আসুন একটি ফর্ম দেখি এবং দেখি কিভাবে আমরা এটিকে আরও ভাল করতে পারি।

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

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

3.2 ইনপুট প্রকার এবং প্যাটার্নস

অন্যান্য ইনপুট প্রকার রয়েছে, যা আপনার প্রয়োজন হতে পারে। এর মধ্যে রয়েছে টেলিফোন নম্বর, ওয়েব ঠিকানা, সার্চ ফর্ম এবং এমনকি রঙ বাছাইকারীরাও! যেহেতু এইচটিএমএল 5 ক্রমাগত বিকশিত হচ্ছে, এটি যুক্তিযুক্ত যে শীঘ্রই আমরা নিকট ভবিষ্যতে আরও ইনপুট প্রকারগুলি নির্দিষ্ট করতে সক্ষম হব।

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

আমরা আমাদের ক্ষেত্রের একটি ইমেইলের উদাহরণ দিতে চাই, তাই ব্যবহারকারীর কি জমা দিতে হবে তার কোন অস্পষ্টতা নেই। এটা করা সত্যিই সহজ। শুধু একটি উদাহরণ ইমেল ঠিকানা দিয়ে 'স্থানধারক' এর একটি নতুন বৈশিষ্ট্য তৈরি করুন।

আমরা নিশ্চিত করতে যাচ্ছি যে আমাদের 'প্রিয় রঙ' ক্ষেত্রটি প্রয়োজন। ইমেইল ইনপুট ট্যাগে শেষ কোণ বন্ধনীতে (>), শুধু 'প্রয়োজনীয়' লিখুন। এটাই. এখন, যখন আপনি কোন মূল্য ছাড়াই আপনার ফর্ম জমা দেওয়ার চেষ্টা করবেন, এটি একটি ত্রুটি বার্তা তৈরি করবে।

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

এটি এইচটিএমএল 5 -তে ফর্মের শক্তির একটি অবিশ্বাস্যভাবে সংক্ষিপ্ত ভূমিকা ছিল। আপনি যদি আরও পড়তে চান, আমি আপনাকে এই লিঙ্কগুলি দেখার পরামর্শ দিচ্ছি।

আরও পড়া:

  • সিএসএস ট্রিকস - আসুন অর্থপূর্ণ মার্কআপ লিখি
  • HTML5 ডাক্তার - আসুন শব্দার্থবিজ্ঞান সম্পর্কে কথা বলি

3.3 নিজেকে পরীক্ষা করুন

আগামী সপ্তাহে এটি আপনার জন্মদিন, এবং আপনি একটি নিবন্ধন ফর্ম তৈরি করতে চান যাতে আপনি জানেন যে আপনার কতটা কেক তৈরি করতে হবে। আপনার পাঠ্য সম্পাদক খুলুন এবং নিম্নলিখিত ক্ষেত্রগুলির সাথে একটি ফর্ম তৈরি করুন।

  • নাম
  • ইমেইল ঠিকানা
  • ফোন নম্বর
  • এলার্জি

নিশ্চিত করুন যে নাম, ইমেল এবং ফোন নম্বর ক্ষেত্রগুলি বাধ্যতামূলক এবং ইমেল এবং ফোন নম্বর ক্ষেত্রগুলি 'ইমেল' এবং 'টেল' ইনপুট প্রকারের সাথে সেট করা আছে। অ্যালার্জি ক্ষেত্রের জন্য 'পরাগ, ডিম, কুইচ' মান সহ একটি স্থানধারক তৈরি করুন।

ফর্ম নিয়ে ঘুরে বেড়ান। প্রয়োজনীয় ক্ষেত্রগুলি খালি হিসাবে জমা দেওয়ার চেষ্টা করুন, এবং ফোন নম্বর ক্ষেত্রে অ-সংখ্যাসূচক অক্ষর সন্নিবেশ করার চেষ্টা করুন। ইমেল ক্ষেত্রে, এমন কিছু ertোকান যা ইমেল ঠিকানা নয়। কি ঘটেছে?

4. গড়

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

এটি আদর্শ ছিল না। প্রথমত, এই কাঠামোর কোনটিই মোবাইল ডিভাইসে ভাল কাজ করেনি। তারা কেবল স্মার্টফোন এবং ট্যাবলেটগুলির আধুনিক বিশ্বের জন্য সজ্জিত ছিল না।

অ্যান্ড্রয়েড অটো দিয়ে আমি কি করতে পারি?

উপরন্তু, তারা মালিকানাধীন বিন্যাস ছিল। ফলস্বরূপ, লিনাক্স এবং ওএস এক্সের ব্যবহারকারীরা একটি সুন্দর দ্বিতীয়-হারের অভিজ্ঞতা পেতে পারে বা এমনকি মিডিয়া পরিষেবাগুলি ব্যবহার করা থেকে বিরত থাকতে পারে, কারণ এটি তাদের প্ল্যাটফর্মের জন্য উপলব্ধ ছিল না।

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

4.1 কিভাবে HTML5 ভিডিও এবং অডিওকে অসাধারণ করে তোলে

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

ফলস্বরূপ, ইউটিউব, ভিমিও এবং নেটফ্লিক্সের মতো প্রধান সংস্থাগুলি এইচটিএমএল 5 বিপ্লবের সুবিধা নিচ্ছে। আপনি তাদের সাথে যোগ দিচ্ছেন না কেন?

4.2 কোডেক সম্পর্কে সব

এই অধ্যায়ে, আপনি আপনার ওয়েব পেজে অডিও এবং ভিডিও অন্তর্ভুক্ত করার জন্য HTML5 এর শক্তি কীভাবে ব্যবহার করবেন তা শিখতে যাচ্ছেন।

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

ফলস্বরূপ, আপনি কিভাবে আপনার ওয়েব পেজে ভিডিও ertোকান তা দিয়ে আপনি কিছুটা বিচক্ষণ হতে হবে। সুতরাং, আসুন দেখি কিভাবে এটি কাজ করে।

4.3 ভিডিও দিয়ে শুরু

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

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

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

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

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

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

4.4 অডিও যোগ করা

আপনার ওয়েব পেজে অডিও এমনভাবে ertedোকানো যেতে পারে যা আমাদের পেজে আমরা কিভাবে ভিডিও insুকিয়েছিলাম তা খুব মনে করিয়ে দেয়।

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

তারপরে, আপনি যে এমপি 3 ফাইলে লিঙ্ক করতে চান তাতে একটি সোর্স ট্যাগ অন্তর্ভুক্ত করুন। কোডেক সামঞ্জস্যের ক্ষেত্রে আপনাকে সত্যিই এতটা চিন্তা করতে হবে না। সাম্প্রতিকতম ওয়েব ব্রাউজারে MP3 টি অডিও চালানোর ক্ষমতা আছে, যদিও এটি একটি।

অবশেষে, আপনি পুরানো ব্রাউজারের জন্য একটি ফলব্যাক তৈরি করতে পারেন। এটি একই পদ্ধতিতে করা হয়েছে যাতে আপনি আপনার ভিডিওর জন্য ফলব্যাক তৈরি করেছেন।

শেষ ফলাফলটি কিছুটা এইরকম দেখাচ্ছে।

যখন আপনি এটি আপনার ওয়েব ব্রাউজারে খুলবেন, তখন এটি কিছুটা এইরকম দেখতে হবে।

4.5 নিজেকে পরীক্ষা করুন

  • আপনার ভিডিও ট্যাগগুলিতে একটি পোস্টার থাকার উদ্দেশ্য কী?
  • আপনি ইন্টারনেট এক্সপ্লোরারে কোন কোডেক ব্যবহার করতে পারবেন না?
  • যদি আমি কিছু অডিও বিরতি দেওয়ার ক্ষমতা চাইতাম, তাহলে আপনি আপনার 'অডিও' ট্যাগে কোন বৈশিষ্ট্য যুক্ত করবেন?

আরও পড়া:

5. CSS3 রূপান্তর এবং অ্যানিমেশন

CSS traditionতিহ্যগতভাবে একটি ওয়েব পৃষ্ঠার বিন্যাস এবং নকশা পরিচালনা করতে ব্যবহৃত হত। এটি এখনও সত্য, তবে এর সর্বশেষ পুনরাবৃত্তিতে এটি উপাদান এবং চিত্রগুলির অ্যানিমেশন এবং রূপান্তরগুলি পরিচালনা করার ক্ষমতা অর্জন করেছে।

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

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

প্রথমে codepen.io এ যান এবং একটি নতুন কলম তৈরি করুন। আমরা এই অধ্যায়টির সময়কালের জন্য এটিকে আমাদের কর্মক্ষেত্র হিসাবে ব্যবহার করতে যাচ্ছি।

আমরা সহজ শুরু করতে যাচ্ছি এবং একটি সাধারণ ইমেজ ট্রান্সফর্ম তৈরি করতে যা একটি ছবি 3 ডিগ্রি ঘুরালে ঘোরবে। প্রথমত, একটি div ট্যাগ তৈরি করুন এবং এটি একটি আইডি দিন। নীচের উদাহরণে, আমি এটি 'মুও' এর একটি আইডি দিয়েছি।

5.1 CSS হোভার এফেক্টস

সেই ডিভিতে, আপনার পছন্দের একটি ছবি অন্তর্ভুক্ত করুন। আমি MakeUseOf এর জন্য লোগোর একটি অনুলিপি অন্তর্ভুক্ত করেছি।

তারপরে আপনাকে কিছু স্টাইলশীটের নিয়ম লিখতে হবে। নীচের উদাহরণে, আমি ছবিটিকে কিছু জায়গা দেওয়ার জন্য একটি শীর্ষ এবং বাম মার্জিন তৈরি করেছি। আমি একটি কৌতূহলী চেহারা স্টাইলশীট নিয়ম অন্তর্ভুক্ত করেছি যা '#muo: hover' দিয়ে শুরু হয়। এটা কি?

যখন আপনি একটি স্টাইলশীট নিয়মে ': hover' সংযুক্ত করেন, এটি একটি উপাদান, একটি আইডি বা একটি ক্লাসের জন্য, আপনি ব্রাউজারকে কার্যকরভাবে বলছেন যে এই স্টাইলটি প্রয়োগ করুন যখন আপনার মাউস উপাদানটি পরিচালনা করে। বেশ ঠান্ডা, তাই না?

'#Muo: hover' নিয়মের ভিতরে, আমরা একটি লাইন পেয়েছি যা বলে '-webkit-transform: rotate (3deg)'। আমি নিশ্চিত যে আপনি অনুমান করেছেন, এটি ব্রাউজারকে সেই ডিভ উপাদানটিকে তিন ডিগ্রি ঘুরিয়ে দিতে বলছে।

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

এখন, যখন আপনি চিত্রের উপর ঘুরে বেড়ান, এটি দেখতে এরকম দেখাচ্ছে:

5.2 ছবির আকার পরিবর্তন করতে CSS3 ব্যবহার করা

তাহলে, সেখানে থামবেন কেন? আপনি কি জানেন যে আপনি একটি ছবি বড় বা সঙ্কুচিত করতে 'রূপান্তর' পদ্ধতি ব্যবহার করতে পারেন? নিম্নলিখিত লাইনগুলি অন্তর্ভুক্ত করার জন্য আসুন আমাদের CSS ফাইল পরিবর্তন করি।

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

আপনি কোড থেকে দেখতে পারেন, আমি MakeUseOf div লোগোর আকার 50%বৃদ্ধি করতে যাচ্ছি। আপনি এটির উপর ঘুরিয়ে এই কাজগুলি পরীক্ষা করতে পারেন। আপনি দেখতে পাবেন যে এখন 'MakeUseOf' লোগো এখন উল্লেখযোগ্যভাবে আরো প্রসারিত।

এটি CSS3 রূপান্তরের একটি খুব মৃদু ভূমিকা ছিল। CSS3 আসলেই খুব নতুন হওয়া সত্ত্বেও, আপনি এখন দেখতে পাচ্ছেন যে আপনি এর সাথে অনেক আকর্ষণীয় ম্যানিপুলেশন করতে পারেন।

5.3 নিজেকে পরীক্ষা করুন

  • আমরা কিভাবে একটি উপাদান একটি স্টাইলিং প্রয়োগ যখন হভার?
  • আপনি কিভাবে CSS3 ব্যবহার করে একটি ছবি ঘোরান?
  • আপনি কিভাবে CSS3 ব্যবহার করে একটি ছবি স্কেল করবেন?
  • আপনি যদি আপনার রূপান্তর পদ্ধতি 'অনুবাদ (50px, 50px)' পাস করেন তাহলে কি হবে?

আরও পড়া:

HTML5 রকস - উপস্থাপনা

6. শুধু যথেষ্ট জাভাস্ক্রিপ্ট

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

একক অধ্যায়ে জাভাস্ক্রিপ্ট কীভাবে ব্যবহার করতে হয় তা শেখানো অসম্ভব হবে। এটাই এখানে লক্ষ্য নয়। উদ্দেশ্য হল আপনাকে পর্যাপ্ত জাভাস্ক্রিপ্ট শেখানো যাতে আপনি পরবর্তী অধ্যায়টি বুঝতে পারেন, যা ক্যানভাস নামক একটি প্রযুক্তি ব্যবহার করে অঙ্কন এবং অ্যানিমেশন তৈরি করতে পারে।

6.1 কনসোল অ্যাক্সেস করা

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

এটা traditionalতিহ্যবাহী যে কোন উদীয়মান ডেভেলপার যে প্রথম প্রোগ্রাম লেখেন তা হল 'হ্যালো ওয়ার্ল্ড' প্রোগ্রাম। এটি একটি সহজ প্রোগ্রাম যা 'হ্যালো ওয়ার্ল্ড' বাক্যটি প্রিন্ট করে, এবং অন্য কিছু নয়। আপনার কনসোলে, 'console.log (' হ্যালো ওয়ার্ল্ড! ') টাইপ করুন;

6.2 আপনার প্রথম প্রোগ্রাম

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

6.3 জাভাস্ক্রিপ্টে ভেরিয়েবল

আপনি 'console.log' তেও ভেরিয়েবল পাস করতে পারেন। ভেরিয়েবলগুলি জটিল বলে মনে হয়, কিন্তু সেগুলো আসলেই তথ্যগুলির কিছু অংশ রাখার জায়গা। এগুলি প্রায়শই সংখ্যা বা অক্ষর। এটি করার জন্য, আপনি 'var' কীওয়ার্ড ব্যবহার করে একটি ভেরিয়েবল ঘোষণা করেন, এটিকে একটি নাম দিন এবং তারপর একটি সমান চিহ্ন দিয়ে, আপনি এটিকে একটি মান দেন। সুতরাং, আমি 'হ্যালো' নামে একটি পরিবর্তনশীল তৈরি করতে যাচ্ছি এবং তারপরে এটিকে 'হ্যালো ওয়ার্ল্ড!' আমি তারপর যে console.log পাস করতে যাচ্ছি।

লক্ষ্য করুন কিভাবে আমি উদ্ধৃতি ব্যবহার করে console.log- এ 'হ্যালো' পাস করিনি। এর কারণ আমি কনসোলে 'হ্যালো' এর বিষয়বস্তু মুদ্রণ করতে চেয়েছিলাম এবং 'হ্যালো' নয়।

6.4 কি কাজ করে

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

6.5 একটি 'ফর' লুপ দিয়ে একটি ক্রিয়া পুনরাবৃত্তি

ধরুন আপনি একটি নির্দিষ্ট সংখ্যক বার একই কাজ করতে চেয়েছিলেন। এই কারণেই আমরা 'ফর' লুপ ব্যবহার করব। এগুলি প্রথমে ভীতিকর দেখায়, তবে একবার আপনি সেগুলি বুঝতে পারলে এটি করা এত সহজ। আপনি 'for ()' লিখে শুরু করেন।

সেই বন্ধনীগুলিতে, আমরা এমন একটি পরিবর্তনশীল তৈরি করতে চাই যা গণনা করে যে আমরা কতবার একটি কর্ম করেছি। সুতরাং, আমরা এমন কিছু পাই যা এইরকম 'for (var i = 0;)'।

আমরা তখন চেক করতে চাই যে আমি কোন শর্ত পূরণ করিনি। সুতরাং, এই ক্ষেত্রে, আমরা দেখতে চাই যে এটি 10 ​​এর কম। সুতরাং, সেমিকোলনের পরে, আমরা 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

যদি আমি 10 এর কম হয়, আমরা একে একে যোগ করতে চাই এবং তারপর কিছু করতে চাই। সুতরাং, আমরা 'i = i + 1' রাখি। আমাদের লুপ প্রায় শেষ: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

এর পরে, আমরা একটি কর্ম করতে চাই। সুতরাং, শেষ বন্ধনীর পরে, আমরা কিছু কোঁকড়া ধনুর্বন্ধনী লিখি এবং তাদের মধ্যে আমরা কনসোল করতে যাচ্ছি। এটি একটি কাউন্টার তৈরি করবে যা নয়টি পর্যন্ত গণনা করবে।

শেষ দুটি প্রোগ্রামিং কনস্ট্রাক্ট যা আমরা দেখতে যাচ্ছি তা হল 'if' স্টেটমেন্ট এবং 'while' loops।

6.6 যদি বিবৃতি

একটি নির্দিষ্ট মানদণ্ড পূরণ হলে একটি 'যদি' বিবৃতি একটি কর্ম সম্পাদন করে। এগুলি নির্মাণে 'ফর' লুপের অনুরূপ এবং নিম্নরূপ কাজ করে। ধরুন আপনার 'চিজবার্গারস' নামে একটি ভেরিয়েবল আছে এবং আপনি দেখতে চান যে এর 'সুস্বাদু' মান আছে কিনা। যদি এটি হয়, আপনি 'yum, cheeseburgers' স্ক্রিনে লগ ইন করতে চান। এটি করার জন্য আপনি এই জাতীয় কিছু লিখবেন।

লক্ষ্য করুন কিভাবে আমি 'if (cheeseburgers ==' tasty ')' লিখেছিলাম। আপনি ডাবল বা ট্রিপল ইকুয়াল ব্যবহার করে সমতা যাচাই করতে এবং একক ইকুয়াল মান নির্ধারণ করতে।

6.7 যখন লুপ

অবশেষে, একটি 'যখন' লুপ একটি ক্রিয়া সম্পাদন করে যখন একটি মানদণ্ড পূরণ করা হয়। সুতরাং, কল্পনা করুন যে আপনি 'yum, cheeseburgers' লগ ইন করতে চান যখন পনিরবার্গার সমান সুস্বাদু। এটি করার জন্য, আপনি নিম্নলিখিতটি লিখবেন।

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

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

6.8 নিজেকে পরীক্ষা করুন

  • আমি 30 থেকে গণনা করতে চাই। একটি 'জন্য' লুপ লিখুন যা এটি করবে।
  • আমি 'makeuseof' নামে একটি ভেরিয়েবল তৈরি করতে চাই এবং এটিকে 'অসাধারণ' মান দিতে চাই। কিভাবে এটা করা হয়?
  • আমি একটি ফাংশন তৈরি করতে চাই যা 'MakeUseOf Is Awesome' প্রিন্ট করলে বলা হয়। সেই ফাংশনটি লিখুন।

আরও পড়া:

7. ক্রিয়েটিভ ক্যানভাস

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

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

7.1 ক্যানভাস দিয়ে শুরু করা

প্রথমত, আপনাকে আপনার ওয়েব ব্রাউজার খুলতে হবে এবং codepen.io এ নেভিগেট করতে হবে। একটি নতুন কলম তৈরি করুন।

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

এখন, আমরা কিছু জাভাস্ক্রিপ্ট কোড লিখতে চাই যা পর্দায় কিছু আঁকবে। আমরা মৌলিক শুরু করতে যাচ্ছি এবং একটি সাধারণ লাল বর্গক্ষেত্র তৈরি করব।

আমরা একটি ভেরিয়েবল তৈরি করতে যাচ্ছি (আমি এটাকে 'ডেমো' বলেছি), এবং তারপর ক্যানভাস এলিমেন্ট নির্বাচন করুন এবং সেই ভেরিয়েবলের জন্য এটি বরাদ্দ করুন। এটি করার জন্য, আপনি document.getElementByID () ব্যবহার করুন এবং আপনি যে উপাদানটি নির্বাচন করতে চান তার আইডি পাস করুন।

আমাদের স্ক্রিপ্টের দ্বিতীয় লাইনটি 'প্রসঙ্গ' নামে আরেকটি পরিবর্তনশীল তৈরি করে এবং তারপরে 'demo.getContext (' 2d ')' কল করে। এটি ব্রাউজারকে বলেছিল যে আমরা একটি 2 ডি ছবিতে কাজ করব, তারপর পর্দায় আঁকার জন্য আমাদের প্রয়োজনীয় ফাংশনগুলি পাস করতে হবে।

তৃতীয় এবং চতুর্থ লাইনগুলি হল যা আসলে পর্দায় অঙ্কন করে। তৃতীয় লাইনটি লাল রঙের একটি আয়তক্ষেত্র পূরণ করে, যখন চতুর্থ লাইনটি ফিলরেক্টকে কল করে, যা এটিকে অবস্থান করে এবং এর দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে।

যদিও এটি চিত্তাকর্ষক নয়। আসুন আরেকটু উন্নত কিছু করি এবং জাভাস্ক্রিপ্ট এবং ক্যানভাসের জাদু ব্যবহার করি মেকআউসঅফ একদম নতুন লোগো তৈরি করতে।

7.2 আকার এবং পাঠ্য

আসুন আমাদের চতুর্থ লাইনটি মুছে ফেলি এবং এটিকে এমন একটি দিয়ে প্রতিস্থাপন করি যা আমাদের আয়তক্ষেত্রটিকে উপরের বাম কোণে রাখে এবং এটি আমাদের ক্যানভাসের দৈর্ঘ্যের জন্য প্রসারিত করে।

প্রথম দুটি যুক্তি সংজ্ঞায়িত করে যে আমরা আকৃতির x এবং y অক্ষকে কোথায় অবস্থান করতে চাই। আপাতত এই দুটিকে '0' তে সেট করা যাক। তৃতীয় যুক্তিটি আকারের প্রস্থকে বোঝায়। আসুন এটি '200' তে সেট করি, এবং তারপর চতুর্থ যুক্তিটি '50' তে ছেড়ে দেই। আপনার এখন এমন কিছু থাকা উচিত যা এইরকম কিছুটা দেখায়।

এটি একটি দুর্দান্ত সূচনা, তবে এতে মেক ইউসঅফের উল্লেখ নেই। সুতরাং, আমরা কিছু পাঠ্য যোগ করতে যাচ্ছি। আসুন 'makeuseof' ধারণকারী একটি পরিবর্তনশীল তৈরি করি, এবং আমরা সেই পরিবর্তনশীলকে 'MakeUseOf' বলব।

আমরা তখন আরেকটি প্রসঙ্গ পরিবর্তনশীল তৈরি করতে চাই। এই একটি 'প্রসঙ্গ 2' কল করুন, এবং নিশ্চিত করুন যে এটি 2d। এটিই আমরা আমাদের পাঠ্য লিখতে ব্যবহার করব।

আমরা আমাদের পাঠ্যকে নীল রঙের করতে চাই এবং আমাদের লাল বর্গক্ষেত্রটি ওভারলে করতে চাই। সুতরাং, ঠিক আগের মতো, আমরা এটিকে 'নীল' একটি ফিল স্টাইল দিতে চাই। এখন, আমরা আমাদের পাঠ্যের বৈশিষ্ট্য নির্বাচন করতে যাচ্ছি। আমরা চাই এটি 20px বড়, বোল্ড ফরম্যাট করা এবং Arial ফন্ট ব্যবহার করে। আমরা প্রসঙ্গ 2 এ ফন্ট কল করি এবং এটিকে 'বোল্ড 20px এরিয়াল' মান নির্ধারণ করি।

যেহেতু আমরা চাই এই লেখাটি আমাদের আগের লাল বাক্সটি ওভারলে করে, তাই আমাদেরকে 'textBaseLine' কে কনটেক্সট 2 এ কল করতে হবে এবং এটিকে একটি শীর্ষ মান দিতে হবে। একবার এটি সম্পন্ন হয়ে গেলে, আমরা প্রসঙ্গ 2 -এ 'fillText' কে কল করি এবং এটি আমাদের পাঠ্য এবং x এবং y স্থানাঙ্ক সম্বলিত ভেরিয়েবলটি পাস করে যেখানে আমরা আমাদের পাঠ্য স্থাপন করতে চাই। আমাদের কোডের শেষ ফলাফলটি এরকম কিছু।

কোড দ্বারা উত্পাদিত ছবিটি এইরকম দেখাচ্ছে।

7.3 ক্যানভাসে একটি শব্দ

যদিও এটি ক্যানভাসের একটি অবিশ্বাস্যভাবে মৌলিক ভূমিকা ছিল, আপনার বুঝতে হবে যে এটি একটি অবিশ্বাস্যভাবে বড় প্রযুক্তি এবং বুট করার জন্য একটি অবিশ্বাস্যভাবে শক্তিশালী। এই গাইডটি কেবল এই নতুন প্রযুক্তি ব্যবহার করে গ্রাফিক্স তৈরির ভূমিকা হিসেবে কাজ করেছে।

ল্যাপটপ লাগানো কি খারাপ?

7.4 নিজেকে পরীক্ষা করুন

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

আরও পড়া:

8. পরবর্তী কোথায়?

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

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

শেয়ার করুন শেয়ার করুন টুইট ইমেইল এটি কি উইন্ডোজ 11 এ আপগ্রেড করার যোগ্য?

উইন্ডোজ নতুন করে ডিজাইন করা হয়েছে। কিন্তু এটা কি আপনাকে উইন্ডোজ 10 থেকে উইন্ডোজ 11 এ স্থানান্তরিত করার জন্য যথেষ্ট?

পরবর্তী পড়ুন সম্পর্কিত বিষয়
  • ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্ট
  • HTML5
  • লংফর্ম
  • লংফর্ম গাইড
লেখক সম্পর্কে ম্যাথিউ হিউজ(386 নিবন্ধ প্রকাশিত)

ম্যাথিউ হিউজস ইংল্যান্ডের লিভারপুলের একজন সফটওয়্যার ডেভেলপার এবং লেখক। তিনি খুব কমই তার হাতে এক কাপ শক্তিশালী ব্ল্যাক কফি ছাড়া পাওয়া যায় এবং একেবারে তার ম্যাকবুক প্রো এবং তার ক্যামেরা পছন্দ করে। আপনি তার ব্লগটি http://www.matthewhughes.co.uk এ পড়তে পারেন এবং ittermatthewhughes এ তাকে টুইটারে অনুসরণ করতে পারেন।

ম্যাথিউ হিউজের থেকে আরো

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

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

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