হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (এইচটিএমএল) হল একটি ফ্রন্ট-এন্ড ল্যাঙ্গুয়েজ যা একটি ওয়েবসাইট ডিজাইন এবং ডেভেলপ করতে ব্যবহৃত হয়। এইচটিএমএল হল স্ট্যাটিক বা ডায়নামিক ওয়েব পেজ ডিজাইন করতে ব্যবহৃত সকল ভাষার প্রাথমিক ভাষা। এইচটিএমএল এর অনেকগুলি ফাংশন রয়েছে যা ডিজাইন করার জন্য প্রয়োজনীয়। কৌণিক বন্ধনীতে লেখা ট্যাগ, কমান্ডের সাহায্যে একটি ওয়েব পেজ ডিজাইন করা হয়। এইচটিএমএল ব্যবহারকারীকে টেক্সট, ইমেজ বা অন্য কোন উপাদান যেমন টেক্সট এডিটর, যেমন মাইক্রোসফট ওয়ার্ড তৈরি বা সম্পাদনা করতে দেয়। এইচটিএমএল এর বিষয়বস্তু হল টেক্সট, ইমেজ, কালার, ডিজাইন ইত্যাদি ডিজাইন একটি খুব গুরুত্বপূর্ণ অংশ কারণ এটি টেক্সট সাজানোর জন্য দায়ী। টেক্সট ইটালিক্স করা টেক্সট ডিজাইনের একটি উদাহরণ। এই উপাদানটি ব্যবহারকারীর দৃষ্টি আকর্ষণ বা জোরদার করার ক্ষেত্রে গুরুত্বপূর্ণ। এই টিউটোরিয়ালে কিছু উদাহরণ তুলে ধরা হলো।
প্রয়োজনীয় জিনিসপত্র
এইচটিএমএল একটি ওয়েবসাইট ডিজাইন এবং বিকাশের জন্য দুটি টুল প্রয়োজন। একটি হল একটি টেক্সট এডিটর যার মধ্যে HTML কোড লিখতে হয়। এটি আপনার অ্যাক্সেসের যেকোনো টেক্সট এডিটর হতে পারে, যেমন, নোটপ্যাড, নোটপ্যাড ++, সাবলাইম, ভিজ্যুয়াল স্টুডিও ইত্যাদি। দ্বিতীয়টি হল আপনার কম্পিউটারে একটি ব্রাউজার, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার ইত্যাদি। এই নিবন্ধে, আমরা নোটপ্যাড ব্যবহার করেছি এবং গুগল ক্রম. স্ট্যাটিক পেজ ডিজাইনের জন্য, আপনার HTML প্রয়োজন এবং CSS স্টাইল শীট স্টাইল করার জন্য। তাদের প্রত্যেকের উদাহরণ সহ এই নির্দেশিকায় ব্যবহার করা হয়েছে।
HTML ফরম্যাট
তির্যক পাঠ্যের নকশা ব্যাখ্যা করার জন্য, আমরা প্রথমে html এর কোডটি বুঝি। এইচটিএমএল কোডের দুটি অংশ রয়েছে। একটি হলো মাথার অংশ, আরেকটি শরীরে। আমরা মাথা অংশে শিরোনাম অন্তর্ভুক্ত; এই শিরোনামের নামটি আসলে পৃষ্ঠার শিরোনাম। মাথার শরীরের অভ্যন্তরীণ স্টাইলিংও করা হয়। যদিও শরীরে টেক্সট, ইমেজ এবং কালার ইত্যাদি সম্পর্কিত অন্যান্য সমস্ত ট্যাগ রয়েছে, এছাড়া আপনি HTML পৃষ্ঠায় যা কিছু যোগ করতে চান তা html কোডের মূল অংশে লেখা আছে।
< html >
< মাথা >...</ মাথা >
< শরীর >…।</ শরীর >
</ html >
নিচের ছবিটি HTML এর একটি নমুনা কোড। আপনি দেখতে পারেন যে শিরোনামের নামটি মাথার অংশের ভিতরে লেখা আছে। একই সময়ে, আমরা ট্যাগ ব্যবহার করে html এর মূল অংশে একটি অনুচ্ছেদ যুক্ত করেছি
। তারপর বডি ট্যাগ এবং এইচটিএমএল ট্যাগ বন্ধ।
এই নমুনার আউটপুট ব্রাউজারে দেখা যায়। আপনি দেখতে পারেন যে শিরোনামের নামটি ট্যাবের নাম দেখানো হয়েছে, যা আমরা HTML কোডের মাথায় ঘোষণা করেছি।
এইচটিএমএল এর শরীরের ভিতরে লেখা সমস্ত ট্যাগের জন্য একটি ওপেনিং এবং ক্লোজিং ট্যাগ রয়েছে। একবার কোড খোলা হলে এর মধ্যে টেক্সট লেখার পর অবশ্যই বন্ধ করতে হবে। ট্যাগটি স্ল্যাশ দিয়ে বন্ধ করা হয়েছে। কোডটি তখন নোটপ্যাড ফাইলে সংরক্ষিত হয়। একটি বিষয় মনে রাখা উচিত যে কোড সংরক্ষণ করার সময়, টেক্সট এডিটরের ফাইলটি html এক্সটেনশন দিয়ে সংরক্ষণ করতে হবে। উদাহরণস্বরূপ, sample.html। তারপর আপনি দেখতে পাবেন যে ফাইলটি বর্তমান ব্রাউজারের আইকন দিয়ে সংরক্ষিত হয়েছে যা আপনি এই উদ্দেশ্যে ব্যবহার করছেন।
এটি ছিল এইচটিএমএলে ডিজাইনিংয়ের পটভূমি। এখন আমরা পাঠ্যকে ইটালিক করতে একটি সহজ উদাহরণ ব্যবহার করব।
উদাহরণ 1
একটি নোটপ্যাড ফাইল নিন এবং এই গাইডে পূর্বে বর্ণিত সহজ এইচটিএমএল কোড লিখুন। শরীরের অংশে দুটি লাইনের একটি অনুচ্ছেদ যোগ করুন। লেখাটিকে ইটালিক করতে। ট্যাগ ব্যবহার করুন শব্দের শুরুতে আপনি ইটালিক আকারে থাকতে চান
< আমি > ……</ আমি >এটি পাঠ্যকে তির্যক করার ট্যাগ। আপনি নীচের ছবিতে দেখতে পারেন, শুরুতে লেখা ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ। শরীর এবং html বন্ধ করুন।
এখন ফাইলটি সেভ করুন এবং ব্রাউজারে রান করুন ফাইলের আউটপুট দেখতে।
আউটপুট থেকে, আপনি লক্ষ্য করতে পারেন যে কোডে আমরা যে বাক্যটি ইটালিক করেছি তা ইটালিক আকারে আছে, যেখানে প্রথম বাক্যটি একটি স্বাভাবিক বিন্যাসে উপস্থিত হয়েছিল।
উদাহরণ 2
এই উদাহরণে, আমরা পাঠ্যের পুরো বাক্যের পরিবর্তে ইটালিক আকারে একটি নির্দিষ্ট শব্দ তৈরি করব। ওপেনিং এবং ক্লোজিং ট্যাগ সমগ্র অনুচ্ছেদে ব্যবহার করা হয়, যেখানেই আমরা বাক্যে পাঠ্যকে ইটালিক করতে চাই।
এখন আবার, ফাইলটি সংরক্ষণ করুন এবং তারপরে এটি ব্রাউজারে চালান। আপনি দেখতে পারেন যে পাঠ্যের কিছু নির্দিষ্ট অংশ ইটালিক আকারে আছে যা আমরা কোডে ইটালিক করতে চাই।
উদাহরণ 3
ব্যবহার করার পাশাপাশি টেক্সটে ট্যাগ, ইটালিক আকারে টেক্সট তৈরি করার আরেকটি পদ্ধতি বিদ্যমান। এটি পাঠ্যের কিছু অংশকে জোর দেওয়ার পদ্ধতি। এই ট্যাগটিতে একটি ওপেনিং এবং ক্লোজিং ট্যাগও রয়েছে। এর জন্য ব্যবহৃত সিনট্যাক্স হল;
< ভিতরে >…।</ ভিতরে >দুটি ট্যাগের মধ্যে লেখাটি লেখা হয়েছে; এই উদাহরণে, আমরা এই ট্যাগটি অনুচ্ছেদে দুইবার ব্যবহার করেছি। নীচে রাখা কোডের ছবিটি দেখা যাক।
উভয় বাক্যে আমরা ব্যবহার করেছি একবার অনুচ্ছেদে। ব্রাউজার ফরম্যাটে এইচটিএমএল ফাইল চালানোর মাধ্যমে আউটপুট পাওয়া যায়।
উদাহরণ 4
এটি এমন একটি উদাহরণ যেখানে আমরা শব্দগুলিকে তির্যক আকারে দেখানোর জন্য অন্য পদ্ধতি ব্যবহার করেছি। এটি পাঠ্যে ব্যবহার বোঝায়। এই উদাহরণে, আমরা এই ট্যাগটি html এর মূল অংশে লেখা পুরো টেক্সটে প্রয়োগ করেছি।
< উদ্ধৃতি > ……</ উদ্ধৃতি > 
সমস্ত ট্যাগ বন্ধ করার পরে, ব্রাউজারে ফাইলটি চালান।
উদাহরণ 5
এখন পর্যন্ত, আমরা পাঠ্যের ইনলাইন স্টাইলিং নিয়ে আলোচনা করেছি। পাঠ্যের একটি তির্যক রূপ তৈরি করাও পাঠ্যের স্টাইলিং এবং নকশা বোঝায়। স্টাইলিং তিন ধরনের। একটি ইনলাইন, দ্বিতীয়টি অভ্যন্তরীণ এবং তৃতীয়টি বাহ্যিক। ট্যাগের মধ্যেই ইনলাইন স্টাইলিং করা হয়। মাথার দেহের ভিতরে অভ্যন্তরীণ লেখা আছে। এবং বহিরাগত স্টাইলিং .css এর এক্সটেনশন সহ অন্য একটি ফাইলে করা হয়।
এটি ইনলাইন CSS এর একটি উদাহরণ; এখানে, আমরা অনুচ্ছেদের ট্যাগের ভিতরে কোড লিখেছি। আমরা স্টাইল স্টেটমেন্টকে ফন্ট-স্টাইল হিসেবে ইটালিক বলে ঘোষণা করেছি। এই বিবৃতিটি ট্যাগের ভিতরে লেখা হয়েছে, তাই এটির কোন ক্লোজিং ট্যাগ থাকবে না, যেমন আপনি উপরের ছবিতে দেখতে পাচ্ছেন। এখন সব ট্যাগ বন্ধ করে ব্রাউজারে চালান। এটি একই ফলাফল দেখায় যা আমরা চেয়েছিলাম।
< পৃ শৈলী=তৈরি করা-শৈলী: তির্যক;> 
উদাহরণ 6
ইনলাইনের পরে, আমরা এখন অভ্যন্তরীণ স্টাইলিং এর উদাহরণ যোগ করব। এখানে মাথার অংশের ভিতরে একটি ক্লাস যোগ করা হয়েছে। তারপর ক্লাসের নাম html এর মূল অংশে অনুচ্ছেদ ট্যাগের ভিতরে ঘোষণা করা হয়। যাতে এটি সহজেই পাওয়া যায়।
< মাথা >< শৈলী >
.প্রতি{
তৈরি করুন-শৈলী: তির্যক;
}
</ শৈলী ></ মাথা >
আপনি দেখতে পাচ্ছেন যে ডট পদ্ধতিতে ক্লাস শুরু হয়েছে। কোডে দুটি অনুচ্ছেদ আছে; আমরা তাদের একটিতে এই স্টাইলিং প্রয়োগ করেছি। সুতরাং এটি কার্যকর যখন আমরা একটি অনুচ্ছেদ বিন্যাস করতে চাই।
অনুচ্ছেদের ভিতরে শ্রেণীর ঘোষণা হল;
< পৃ শ্রেণী=a>< পৃ শ্রেণী='প্রতি'>
এটি মাথায় ক্লাসে প্রবেশ করবে। এখন আউটপুট দেখুন। আপনি লক্ষ্য করবেন যে একটি অনুচ্ছেদ ইটালিক আকারে রয়েছে।
উপসংহার
এই নিবন্ধটি ইটালিক আকারে পাঠ্যের বিন্যাসকে উপস্থাপন করে। টেক্সট ডিজাইনিং একটি ওয়েব পেজ ডিজাইনের একটি অপরিহার্য অংশ।