প্রমাণিত ব্যায়াম এবং কুইজ সহ দ্রুত এইচটিএমএল মাস্টার করুন
এইচটিএমএল হল হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের সংক্ষিপ্ত রূপ। ভাষাটি ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশনের জন্য মৌলিক বিল্ডিং ব্লক প্রদান করে। HTML একটি ব্রাউজারে একটি ওয়েব নথির বিষয়বস্তু গঠন এবং বর্ণনা করতে ব্যবহৃত হয়। আপনি যদি একজন ওয়েব ডেভেলপার হতে চান, তাহলে এইচটিএমএল এর আয়ত্ত গুরুত্বপূর্ণ। সৌভাগ্যবশত, আপনি HTML ব্যায়ামের মাধ্যমে এই মৌলিক ভাষা আয়ত্ত করতে পারেন।
আপনি এইচটিএমএল বুটক্যাম্পে যোগদান করতে চান বা কেবল আপনার দক্ষতা অর্জন করতে চান, এইচটিএমএল ব্যায়াম সম্পূর্ণ করা এবং এইচটিএমএল কুইজ নেওয়া প্রযুক্তি শিল্পে সুযোগের জন্য প্রস্তুত করার দুর্দান্ত উপায়। আপনি যদি HTML এর সাহায্য পেতে প্রস্তুত হন এবং কোথায় আপনি HTML উন্নত এবং নিয়মিত ব্যায়াম অনুশীলন করতে পারেন তা জানতে, পড়ুন৷
নিয়মিত ব্যায়াম এবং চ্যালেঞ্জগুলি আপনাকে HTML শিখতে সাহায্য করার একটি দুর্দান্ত উপায়। এটি শেখার একটি সহজ ভাষা, বিশেষ করে যদি আপনি ধারণা এবং মৌলিক কৌশলগুলি আয়ত্ত করার চেষ্টা করছেন। যাইহোক, আপনার যদি কম্পিউটিং এর কোন ব্যাকগ্রাউন্ড না থাকে তবে ভাষা আয়ত্ত করা একটু কঠিন হতে পারে। শেখার প্রক্রিয়া সহজ করতে নীচে HTML অনুশীলনের একটি তালিকা রয়েছে।
10টি HTML ব্যায়াম এবং অনুশীলনের সমস্যা (সমাধান সহ)
1. HTML দিয়ে একটি ল্যান্ডিং পৃষ্ঠা তৈরি করুন
একটি ল্যান্ডিং পৃষ্ঠা বিক্রয় চালানোর জন্য ডিজাইন করা হয়েছে। এটি এমন ওয়েবসাইট যা লোকেরা একটি নির্দিষ্ট পরিষেবা সম্পর্কে তথ্য জানতে ভিজিট করে। এটি এমন একটি পৃষ্ঠা যা একটি বিপণন প্রচারের অংশ হিসাবে দর্শকদের কাছ থেকে ব্যক্তিগত তথ্য সংগ্রহ করতে ব্যবহার করা যেতে পারে। তাহলে, আপনি কিভাবে HTML দিয়ে একটি ল্যান্ডিং পেজ তৈরি করবেন?
সমাধান: প্রথমত, ওয়েবসাইটের জন্য একটি কাঠামো তৈরি করুন। আপনি একটি বিনামূল্যের HTML ফ্রেমওয়ার্ক ব্যবহার করতে পারেন। কাঠামোতে শিরোনাম, প্রধান এবং ফুটার উপাদান থাকা উচিত। তারপরে, একটি নেভিগেশন বার তৈরি করুন এবং পৃষ্ঠার শীর্ষে পেস্ট করুন। এর পরে, একটি ডিফল্ট ব্যাকগ্রাউন্ড ইমেজ তৈরি করুন এবং এটি স্টাইল করুন। একটি নেভিগেশন বার এবং ব্যাকগ্রাউন্ড তৈরি করতে, খোলার ট্যাগ বা ক্লোজিং ট্যাগের আগে নেভিগেশন বারের নীচে কোড স্নিপেট রাখুন।
2. একটি HTML অ্যাট্রিবিউট তৈরি করুন
একটি HTML অ্যাট্রিবিউট হল একটি শব্দ বা শব্দের একটি স্ট্রিং যা একটি HTML উপাদানের বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করার জন্য একটি খোলার ট্যাগের ভিতরে স্থাপন করা হয়। একটি বৈশিষ্ট্যের উদ্দেশ্য হল একটি HTML উপাদান কীভাবে আচরণ করে তা নির্ধারণ করা। তাহলে, আপনি কিভাবে একটি HTML এট্রিবিউট তৈরি করবেন?
সমাধান: এইচটিএমএল বৈশিষ্ট্য তৈরি করার বিভিন্ন উপায় আছে। আমাদের স্টাইল, ক্লাস, alt, শিরোনাম, href, src, এবং lang আছে। একটি ক্লাস অ্যাট্রিবিউট তৈরি করতে, সিনট্যাক্সটি হবে const att =document.createAttribute("class"), তারপর আপনি ক্লাস অ্যাট্রিবিউটের মান alt.value ="ডেমো ক্লাস" এ সেট করবেন। তারপর, document.getElementsByTagName(“h1”)[0];h1.setAttributeNode(att);
হিসাবে প্রথম শিরোনামে ক্লাস অ্যাট্রিবিউট যোগ করুন।
3. HTML এ একটি নথির ফন্ট পরিবর্তন করুন
আপনার নথির ফন্ট স্টাইলিং আপনার ওয়েবসাইটের নান্দনিকতায় ব্যাপকভাবে অবদান রাখে। আপনার ওয়েবসাইটের ফন্ট শৈলী তার দর্শকদের জন্য উপযুক্ত তা নিশ্চিত করা উচিত। যদি আপনার ব্যবসার চিত্রটি সম্ভাব্য সর্বোত্তম উপায়ে চিত্রিত না করে, আপনি এটি সংশোধন করতে পারেন। তাহলে, আপনি কিভাবে HTML এ একটি নথি ফন্টের ধরন পরিবর্তন করবেন?
সমাধান: HTML এ ফন্ট পরিবর্তন করার উপায় হল একটি ক্যাসকেডিং স্টাইল শীট (CSS) ফন্ট প্রপার্টি ব্যবহার করা। আপনি শুরু করার আগে CSS শিখতে চাইবেন। আপনি প্রস্তুত হয়ে গেলে, সিএসএস ফন্টটিকে নির্বাচিত মান সেট করুন এবং এটি একটি শৈলী বৈশিষ্ট্যে রাখুন। এই উদাহরণে, এটি ইন-লাইন স্টাইল অ্যাট্রিবিউট, যার জন্য আপনাকে HTML ওপেনিং ট্যাগের ভিতরে স্টাইল অ্যাট্রিবিউট রাখতে হবে।
4. একটি ইমেজ লিঙ্ক তৈরি করুন
ইমেজ লিঙ্কটি ওয়েব পেজকে বলে যে ছবিটি কোথায় অবস্থিত। এই তথ্য সাধারণত src বৈশিষ্ট্য এম্বেড করা হয়. এতে ওয়েব ঠিকানা এবং ছবির URL এর মতো বিশদ বিবরণ রয়েছে। তাহলে, কিভাবে আমরা একটি ওয়েব পেজে একটি ইমেজ লিঙ্ক তৈরি করব?
এইচটিএমএল ফর্মগুলিতে ইন্টারেক্টিভ কন্ট্রোল নামক উপাদান থাকে। এর মধ্যে রয়েছে চেকবক্স, টেক্সট ফিল্ড, সাবমিট বা রিসেট বোতাম এবং ওয়েবসাইট ভিজিটরদের কাছ থেকে ইনপুট সংগ্রহ করতে ব্যবহৃত মেনু। এই তথ্য হতে পারে নাম, ফোন নম্বর, এবং ইমেল বা বাড়ির ঠিকানা। অনলাইন ফর্মগুলি আপনার দর্শকদের সম্পর্কে তথ্য সংগ্রহের একটি সস্তা এবং আরও ব্যক্তিগত উপায়। একটি HTML ফর্ম একটি যোগাযোগ ফর্ম বা একটি গির্জা দান ফর্ম হতে পারে। তাহলে, আমরা কিভাবে একটি তৈরি করব?