Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৩] :: এইচটিএমএল ট্যাগ, লাইন ব্রেক-আপ, হেডিং

2,271 দেখা 13 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

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

এইচটিএমএল ট্যাগ

এইচটিএমএল ট্যাগ সব সময় Less Than (<) চিহ্ন দিয়ে শুরু হয় এবং Greater Than (>) চিহ্ন দিয়ে শেষ হয় । তাই, <html>, <head>, <body> লেখা হয়েছে । প্রায় প্রত্যেকটি ট্যাগ এর শুরু এবং শেষ আছে । তাই, যখন <html>, <head>, <body> ট্যাগ শুরু হয়েছে তখন ট্যাগটি </html>, </head>, </body> এভাবে শেষ হয়েছে । ট্যাগ শেষ করার জন্য Less Than চিহ্নের পরে একটা Forward Slash (/) চিহ্ন দিতে হয় । অর্থাৎ html ট্যাগ শুরু হয় <html> এভাবে এবং শেষ হয় </html> এখানে পার্থক্য শুধু একটা Forward Slash এছাড়া কোন পার্থক্য নেই ।  ট্যাগ সরাসরি ব্রাউজারে প্রদর্শন করে না । তবে এইচটিএমএল ট্যাগ কন্টেন্ট এর ধরন পরিবর্তন করতে পারে । আমি এখন একটি উদাহরণের মাধ্যমে আপনাদের কাছে বিষয়টি পরিষ্কার করবো ।

নিচের কোডটুকু একটি টেক্সট এডিটর এ লিখে index.html সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Tutorial </title>
</head>
<body>
<i> This is Italic Text. </i>
</body>
</html>

যদি এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করানো হয় তাহলে This is Italic Text লেখাটি ইটালিক স্টাইল এ প্রদর্শিত হবে । কেননা, আমরা ইটালিক ট্যাগ ব্যবহার করেছি । এছাড়া, টেক্সটকে বোল্ড, আন্ডারলাইন করার জন্য আলাদা আলাদা ট্যাগ রয়েছে । যেমন, <p>…</p> (প্যারাগ্রাফ টেক্সট নির্ধারণ করার জন্য ।),  <i>…</i> (ইটালিক টেক্সট নির্ধারণ করার জন্য), <b>…</b> (বোল্ড টেক্সট নির্ধারণ করার জন্য), <u>…</u> (আন্ডারলাইন টেক্সট নির্ধারণ করার জন্য) এছাড়া আরও অনেক ট্যাগ রয়েছে । আমরা তা পর্যায়ক্রমে আলোচনা করবো ।

লাইন ব্রেক-আপ

লাইন ব্রেক-আপ ট্যাগ কোন লাইন ব্রেক করার জন্য ব্যবহার করা হয় । আমরা মাইক্রোসফট কোন ওয়ার্ড লাইন শেষ করে নতুন লাইন শুরু করার জন্য কিবোর্ড এ এন্টার (Enter) প্রেস করি । একইভাবে এইচটিএমএল এ কোন লাইন ছেড়ে নতুন লাইন শুরু করার জন্য এইচটিএমএল লাইন ব্রেক-আপ ট্যাগ ব্যবহার করা হয় । লাইন ব্রেক-আপ ট্যাগটি এইচটিএমএল এর ব্যতিক্রম ট্যাগসমূহের একটি । কেননা, লাইন ব্রেক ট্যাগ অন্যান্য ট্যাগ এর মত নয় । লাইন ব্রেক আপ ট্যাগটি লেখা হয় <br /> এভাবে ।  বিষয়টি ভাল করে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Tutorial </title>
</head>
<body>
<p> This is Paragraph Text. </p> <br />
<i> This is Italic Text </i> <br />
<b> This is Bold Text </b> <br />
<u> This is Underline Text </u> <br />
</body>
</html>

এবার index.html ফাইলটি ওপেন করে দেখুন লাইনসমূহ লাইন ব্রেক-আপ ট্যাগ অনুযায়ী শেষ হয়েছে । যদি লাইনব্রেক আপ ট্যাগ ব্যবহার করা ছাড়া উপরের কোডটুকুর আউটপুট ব্রাউজারে প্রদর্শন করানো হতো তাহলে কেমন দেখাতো সেটা জানতে লাইন ব্রেক –আপ ট্যাগ কেটে দিয়ে আবার ব্রাউজারে প্রদর্শন করান । অর্থাৎ নিচের কোডটুকু index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Tutorial </title>
</head>
<body>
<p> This is Paragraph Text. </p>
<i> This is Italic Text </i>
<b> This is Bold Text </b>
<u> This is Underline Text </u>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করান । তাহলে দেখতে পারবেন লাইনসমূহ নিচে ইচে সজ্জিত হয়নি ।

হেডিং (Heading)

আমরা যখন কোন কন্টেন্ট এর শিরোনাম লিখতে যাই তখন আমরা এইচটিএমএল এর হেডিং ট্যাগ ব্যবহার করি । এইচটিএমএল এর হেডিং ট্যাগ ছয়টি । এখন আমরা ছয়টি হেডিং ট্যাগ এর উদাহরণ দেখবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Tutorial </title>
</head>
<body>
<h1> This is Heading One </h1> <br />
<h2> This is Heading Two </h2> <br />
<h3> This is Heading Three </h3> <br />
<h4> This is Heading Four </h4> <br />
<h5> This is Heading Five </h5> <br />
<h6> This is Heading Six </h6> <br />
</body>
</html>

এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে ছয়টি হেডিং এর রূপ দেখতে পারবেন । প্রতিটি হেডিং এর পর আমি লাইন ব্রেক আপ ট্যাগ ব্যবহার করেছি যেন কোডসমূহ নিচে নিচে সজ্জিত হয় ।

সেলফ ওয়ার্ক

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

১ । ট্যাগ কিভাবে লেখা হয়?
২ । এইচটিএমএল ট্যাগ কি ব্রাউজারে সরাসরি প্রদর্শিত হয়?
৩ । লাইন ব্রেক আপ ট্যাগ কেন ব্যবহার করা হয়?
৪ । কিভাবে এইচটিএমএল এর মাধ্যমে একটি টেক্সটকে আন্ডারলাইন করা হয়?
৫ । কোন হেডিং ট্যাগ টেক্সট সবচেয়ে বড় টেক্সট আকার ধারন করে?

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

ভাল থাকবেন সবাই আর আমার জন্য দোয়া করবেন । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

১। HTML Tag লিখতে হলে প্রথমে less than দিয়ে আরম্ভ করতে হয়। শেষ করার জন্য less than এর পরে Forward Slash ব্যবহার করতে হয়।

২। এইচটিএমএল ট্যাগ ব্রাউজারে সরাসরি প্রদর্শিত হয় না।

৩। লাইন ব্রেক আপ এর জন্য লাইন ব্রেক আপ ট্যাগ ব্যবহার করা হয়।

৪। ‘ ‘

৫। ‘ ‘

Level 0

৪। u

৫। h1

Level 0

১। ট্যাগ লেস দেন চিহ্ন দিয়ে শুরু হয়।এবং গ্রেটার দেন চিহ্ন দ্বারা শেষ হয়।
২।না।
৩।দুটি লাইনকে ব্রেক করার জন্য।
৪। u ট্যাগ ব্যবহার করে।
৫।h1 ট্যাগ।

Level 0

১ । ট্যাগ কিভাবে লেখা হয়?
উত্তরঃ
২ । এইচটিএমএল ট্যাগ কি ব্রাউজারে সরাসরি প্রদর্শিত হয়?
উত্তরঃ না
৩ । লাইন ব্রেক আপ ট্যাগ কেন ব্যবহার করা হয়?
উত্তরঃ দুটি লাইনকে ব্রেক করার জন্য এব্ং নির্দিষ্ট জায়গায় থাকার জন্য
৪ । কিভাবে এইচটিএমএল এর মাধ্যমে একটি টেক্সটকে আন্ডারলাইন করা হয়?
উত্তরঃ ইউ ট্যাগ ব্যবহার করে।
৫ । কোন হেডিং ট্যাগ টেক্সট সবচেয়ে বড় টেক্সট আকার ধারন করে?
উত্তরঃ h1

Level 0

line break er jonno use na kore use korleo to hoy tahole difference ki?

    Level 0

    @mythhistory: আমরা মাইক্রোসফট কোন ওয়ার্ড লাইন শেষ করে নতুন লাইন শুরু করার জন্য কিবোর্ড এ এন্টার (Enter) প্রেস করি । একইভাবে এইচটিএমএল এ কোন লাইন ছেড়ে নতুন লাইন শুরু করার জন্য এইচটিএমএল লাইন ব্রেক-আপ ট্যাগ ব্যবহার করা হয় ।

Level 0

line break er jonno use na kore use korleo to hoy tahole difference ki?

Level 0

line break er jonno use na kore use korleo to hoy tahole difference ki?

Level 0

১ । ট্যাগ কিভাবে লেখা হয়?
>>> Less than and Greater than দিয়ে লিখতে হয় । এখানে কোড দেখায় না তো
২ । এইচটিএমএল ট্যাগ কি ব্রাউজারে সরাসরি প্রদর্শিত হয়?
>>> ট্যাগ ব্রাউজারে সরাসরি দেখায় না। ট্যাগের মাঝখানে থাকা এলিমেন্ট শুধু দেখায়
৩ । লাইন ব্রেক আপ ট্যাগ কেন ব্যবহার করা হয়?
>>>নতুন লাইন শুরু করার জন্য
৪ । কিভাবে এইচটিএমএল এর মাধ্যমে একটি টেক্সটকে আন্ডারলাইন করা হয়?
>>>
৫ । কোন হেডিং ট্যাগ টেক্সট সবচেয়ে বড় টেক্সট আকার ধারন করে?
>>> h1

Level 0

1 এবং 2 টিউনটা দরকার।