[ব্যাসিক] ওয়েব ডিজাইনার হতে চান? আসুন আমাদের নিকট এবং বইটি পড়ুন। অধ্যায়-০৩- ট্যাগ এবং হ্যালো ওয়ার্ল্ড কোড এক্সপ্লেইন

হ্যালো বন্ধুরা,
আসসালামুয়ালাইকুম!! কেমন আছেন আপনারা? আশা করি ভালো আছেন। আল্লাহর অশেষ রহমতে আমিও ভালোই আছি। তো আবারো হাজির হলাম আপনাদের মাঝে আমার এই বইটি নিয়ে। তো শুরু করা যাকঃ-

আমি আন্তরিক ভাবে দুঃখিত এ আমি এর আগের অধ্যায়ে আপনাদের কোড টি বুঝিয়ে দেইনি৷ তবে আজ আমি কোড টি সম্পূর্ন আগা-গোড়া বুঝিয়ে দেবার চেষ্টা করবো ইনশাল্লাহ। গত অধ্যায়ের কোডটি নিম্মরুপঃ-

Example

<!DOCTYPE html>
<html>
<head>
<title> Hello World! </title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

উপরের কোডটি একজন ডিজাইনার বলি অথবা একজন প্রোগ্রামার এর কথা বলি সবাই অর্থাৎ সে হোক ডিজাইনার অথবা সে হোক ডেভলপার অথবা সে হোক প্রোগ্রামার সবার জীবনের প্রথম কোড এবং অন্যতম প্রয়োজনীয় কোড হলো এটি। এমন কোন প্রোগ্রামার বা ডিজাইনার বা ডেভলপার নেই যে এই কোডটি লিখেন্নি। হ্যা সবাই এই কোড টি লিখেছেন কিন্তু সবার ক্ষেত্রে কোড একই রকম হবেনা এখন আমরা এইচটিএমএল এ কোড টি লিখালাম তাই কোড টি এমন দেখালো এখন আমরা
যদি PHP তে কোডটি লিখতাম তাহলে কোডটি একদম বদলে গিয়ে এরকম হতোঃ-

Example

<?php echo "Hello World!!"; ?>

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

Example

<!DOCTYPE html>

এই উপরোক্ত কোডটি দ্বারা আমরা বুঝতে পারি এটি এইচটিএমএল এর কোন ভার্সন এর কোড। প্রত্যেক টা জিনিসের একটা ভার্সন থাকে ঠিক তেমনি এইচটিএমএল এবং সব ধরণের ল্যাংগুয়েজ এরই ভার্সন আছে। উপরোক্ত লাইন দ্বারা আমরা বুঝতে পারি যে আমরা যেই কোড টি লিখেছি সেই কোডটি HTML 5.0 ভার্সনের কোড সিস্টেম বা কোড ফরম্যাটে লিখা হয়েছে। আপনি যদি আপনার কোডে এই লাইন্টি নাও লিখেন তাহলেও কোড এ কোন ভুল হবে না তখন আপনাকে বুঝে নিতে হবে যে আপনার কোডটি HTML 4 ভার্সনের কোড ফরম্যাটে লিখা। এই লাইনটির প্রধান কাজ হলো ব্রাউজার কে বুঝানো যে আমরা যেই কোডটি লিখেছি সেটি HTML5 এ লিখা। যখন আমরা কোড টা লিখে রান করি। তখন ব্রাউজার একটা একটা লাইন পড়ে সে যখন প্রথম লাইনটি পড়ে সে বুঝতে পেড়ে যায় যে এটি একটি HTML5 এর কোড। এই লাইন্টি লিখা হয় এই কারণেই যেন ব্রাউজার বুঝতে পারে যে এটি HTML5 এর একটি কোড।

তারপরের লাইন্টি হলোঃ-

Example

<html></html>

উপরোক্ত লাইন্টি একটি ট্যাগ। এই ট্যাগ দ্বারা ব্রাউজার বুঝে যে এট একটি HTML ফাইল এবং এই ট্যাগ টি এইচটিএমএল এর সব এলিমেন্টস দের নিজের মাঝে সংরক্ষণ করে রাখে। এখন সবার মনে একটাই প্রশ্ন সেটা হলো “ট্যাগ কী?” হ্যা ভাই বলছি ট্যাগ হলো এইচটিএমএল এর মূল ভিত্তি বলা চলে এইচটিএমএল সম্পূর্ণরূপে ট্যাগ এর উপর নির্ভরশীল না হলেও বলা চলে। ট্যাগ সাধারণত ব্যবহার করা হয় আপনার লিখিত কন্টেন্ট কে মডিফাই করে আরও সুন্দর করার জন্যে তবে সব ট্যাগ এর কাজ সুন্দর করা না যেমন উপরোক্ত ট্যাগ এর কাজ হলো ব্রাউজার কে নির্দেশ করা যে এটি এক্টি এইচটিএমএল ফাইল। ট্যাগ সাধারণত দুই ধরণের হয়ঃ-

  • Opening/Starting/Start Tag
  • Closing/Ending/End Tag

Opening Tag হলো কোন ট্যাগ এর শুরু যেমন বলতে পারি আপনারা অধ্যায়-০২ এর কোডটি(প্রথম কোডটি) তে খেয়াল করবেন …… এভাবে লিখা আছে। এবং এদের মাঝখানে আরও অনেক ট্যাগ আছে। এখন এখানে হলো Opening Tag এবং হলো Closing Tag। মনে রাখবেন প্রত্যেক টা ট্যাগ যেমন শুরু হবে তেমনি শেষ হবে। বুঝার স্বার্থে একটি ট্যাগ আমরা লিখার সময় এভাবে লিখবোঃ-

Example

<ট্যাগএরনাম></ট্যাগএরনাম>

কিন্তু কিছু ট্যাগ আছে যাদের শুরু আছে কিন্তু শেষ নেই৷ তারা হলোঃঃ-

Example

<hr/>
<br/>

অর্থাৎ সব ট্যাগ শুরু হবে শেষ হবে কিন্তু এরা দুজন শুরু হবে কিন্তু শেষ হবেনা। তারপরের লাইন্টি হলোঃ-

Example

<head>
<title>Hello World</title>
</head>

উপরের ট্যাগটির কাজ হলো এইচটিএমএল ফাইল্টির সব ধরনের তথ্য ধরে রাখা। যেমন এই পেজ এ কি করা হয়েছে তা আমরা এর মাঝে আরেকটা ট্যাগ এ লিখে দিয়েছি। এখন যখন পেজ টি লোড নিবে ট্যাব এ Hello World!! লিখাটি দেখাবে। আমরা যাই লিখে দিবো তাই শো করবে। এই head ট্যাগ এর ভিতর আরও অনেক ট্যাগ লিখা হয় যা আমরা পরে জানবো। তারপরের লাইন্টি হলো:-

Example

<body></body>

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

Example

<p>Hello World!!</p>

এইখানে আমরা আরেকটি ট্যাগ ব্যবহার করেছি যাকে বলা হয় Paragraph ট্যাগ আমরা যখন কোন লিখা body ট্যাগ এর ভিতর লিখবো তখন তা সুন্দর করে দেখাবেনা। যখন আমরা৷

ট্যাগ এর ভিতরে লিখবো তখন খুব সুন্দর করে দেখাবে। আমরা সবাই কম বেশি paragraph লিখতে জানি ঠিক আপনি যখন এই

ট্যাগের মধ্যে কিছু লিখবেন তখন আপনার লেখাটি দেখতে আপনার ছোটবেলায় লিখা paragraph এর মতো করে দেখাবে।

আজকের জন্য এতটুকুই আবার হাজির হবো আপনাদের মাঝে নতুন অধ্যায় নিয়ে আমি ইনাদ ইসলাম বিদায় নিচ্ছি আজকের মতো। আল্লাহ হাফেজ আশা করবো আপনাদের বুঝাতে পেরেছি আমি প্রত্যেক্টা লাইন বুঝানোর চেষ্ট করেছি। ভুল ত্রুটি হলে মাফ করবেন।

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

ভালো থাকুন সুস্থ থাকুন আল্লাহ হাফেয।

ফেসবুকে আমি:-Inad Islam


from Trickbd.com https://ift.tt/2qpfAsx
Post a Comment (0)
Previous Post Next Post