এটি একটি ধারাবাহিক টিউন। পড়ুন, সব গুলো পর্ব

• HTML হাতেখড়ি [পর্ব- ১] প্রাথমিক আলোচনা
• HTML হাতেখড়ি [পর্ব-২] হেডিং(Heading), প্যারাগ্রাফ( Paragraph), লিংক( Link)
• HTML হাতেখড়ি [পর্ব-৩] HTML ফরমেটিং (Formatting), লিস্টিং (Listing) এবং কমেন্ট(Comment)
• HTML হাতেখড়ি [পর্ব-4] HTML টেবিল (Table) এবং ইনটিটিস (Entities)
• HTML হাতেখড়ি [পর্ব- ৫] এইচ.টি.এম.এল  ফ্রেম (HTML Frame)
• HTML হাতেখড়ি [পর্ব- ৬] এইচ.টি.এম.এল ফর্মের উপাদান (HTML Forms Element)

গত পর্বে আমরা HTML ফাইল কিভাবে তৈরি করতে হয় তা শিখেছি। আজ আমরা HTML হেডিং, প্যারাগ্রাফ এবং লিংক সম্বন্ধে জানব।

HTML Heading:

HTML Heading সম্বন্ধে জানতে গিয়ে আমাদের মনে কিছু প্রশ্ন আসতে পারে। প্রশ্নগুলোর উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: HTML Heading কি?

উত্তর: আমরা যারা মাইক্রোসফট অফিস ব্যবহার করে থাকি তারা উপরের বারে প্রায়ই হেডিং(Heading) নামে একটা অপশন দেখি। এখন এই হেডিংটা আসলে কি? হেডিং এর কাজ লেখাকে একটি নির্দিষ্ট আকৃতি(Size) দেওয়া। এজন্য  অনেকগুলো হেডিং(Heading) ব্যবহার করা হয়। যেমন:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

দ্বিতীয় প্রশ্ন: HTML Heading কি কাজে ব্যবহার করা হয়?

উত্তর: এটি লেখার সৌন্দর্য বৃদ্ধির জন্য অর্থাৎ শিরোনাম থেকে বর্ণনাকে বা বর্ণনা থেকে শিরোনামকে আলাদাভাবে দেখানো জন্য ব্যবহার করা হয়।

তৃতীয় প্রশ্ন: HTML এ এটি কিভাবে কাজ করে বা কিভাবে লিখলে এটি আউটপুট প্রদর্শন করে।

উত্তর: প্রথমে নোটপ্যাড++ ওপেন করে নিচের কোডটি টাইপ করুন (কিভাবে এবং কোথায় করবেন তা জানতে পর্ব-1 দেখুন)। নোটপ্যাড++ না থাকলে এখানে ক্লীক করে ডাউনলোড করে নিন।

<h1>This is Heading one</h1>
<h2>This is Heading two</h2>
<h3>This is Heading three</h3>
<h4>This is Heading four</h4>
<h5>This is Heading five</h5>
<h6>This is Heading six</h6>

এরপর এটি যেকোন নামে অথবা heading.html নামে সেভ(save) করুন।

এরপর সেভ করা ফাইলটিতে ডাবল ক্লীক করার পর আউটপুট হিসেবে আপনার ব্রাউজার আপনাকে যা দেখাবে তা নিম্নে দেওয়া হল:

This is Heading one

This is Heading two

This is Heading three

This is Heading four

This is Heading five

This is Heading six

Paragraph:

এবার আসি প্যারাগ্রাফ। প্যারাগ্রাফ শুরু করতে গেলেই প্রথমেই আমাদের মনে কিছু প্রশ্ন আসবে। প্রশ্নগুলো উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: Paragraph কি?

উত্তর: আমরা প্রায় সবাই কোন না কোন বিষয় নিয়ে ওয়েব সাইট তৈরি করি। এখন তা হতে পারে কোন সফটওয়্যারের ওয়েবসাইট বা কোন গেমসের ওয়েব সাইট অথবা কোন শিক্ষামূলক ওয়েবসাইট। এখন ঐ ওয়েব সাইটের মধ্যে আমরা যে বিষয় নিয়ে ওয়েব সাইট তৈরি করি তা নিয়ে কিছু না কিছু লিখি। অর্থা‍ৎ সহজ ভাষায় বলতে গেলে আমরা ওয়েব সাইটে কোন কিছু লেখার জন্য এইচ.টি.এম.এল. এ যে ট্যাগ ব্যবহার করি তা হল Paragraph ট্যাগ।

দ্বিতীয় প্রশ্ন: Paragraph কিভাবে লেখা হয়?

উত্তর: Paragraph লিখতে হলে <p> </p> এই ট্যাগ ব্যবহার করতে হয়। উদাহরণসরূপ:

<p> Techtunes is the First Bangla Technology blog and we all love Techtunes. </p>

আউটপুট হিসেবে এটি যা দেখাবে তা নিম্নে দেওয়া হল:

Techtunes is the First Bangla Technology blog and we all love Techtunes.

তৃতীয় প্রশ্ন: একটি Paragraph কিভাবে ডানে, বামে কিংবা মাঝখানে লেখা যায়?

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

<p align ="right">This tag shows the paragraph right</p>
<p align = "center">This tag shows the paragraph center</p>
<p align = "left">This tag shows the paragraph left</p>

আউটপুট হিসেবে যা দেখাবে:

This tag shows the paragraph right

This tag shows the paragraph center

This tag shows the paragraph left

আশাকরি বলে দেওয়া লাগবে না কোন ট্যাগ কিভাবে কাজ করেছে।

চতুর্থ প্রশ্ন: প্যারাগ্রাফে আমরা কিভাবে নতুন লাইন আনব?

উত্তর: আমরা প্যারাগ্রাফ ট্যাগের মধ্যে কোনকিছু লিখলে তা সরলরেখায় চলতে থাকবে যদি না আমরা তার মধ্যে ব্রেক ট্যাগ ব্যবহার করি। কি একটু কঠিন লাগছে। আসলে এটা কোন কঠিন ব্যাপারই না। আমরা যখন মাইক্রোসফট ওয়ার্ড এ কোন কিছু লিখি তখন কীবোর্ডের এন্টার বাটন চাপলেই নতুন লাইন এসে যায়। কিন্তু HTML এর ক্ষেত্রে <br/> ট্যাগ ব্যবহার করতে হয়। একটু ঠান্ডা মাথায় নিম্নের উদাহরণটি দেখুন তাহলেই সব বুঝতে পারবেন।

প্রথম উদাহরণ:

<p>I love Techtunes. I love Techtunes. I love Techtunes. </p>

এই উদাহরণটিতে তিনবার I love Techtunes কথাটি বলা হয়েছে এবং এগুলো একই লাইনে প্রদর্শিত হবে। আউটপুট নিম্নরূপ:

I love Techtunes. I love Techtunes. I love Techtunes.

দ্বিতীয় উদাহরণ:

<p>I love Techtunes. <br/>
I love Techtunes. <br/>
I love Techtunes. </p>

দ্বিতীয় উদাহরণটির দিকে আপনি তাকালে দেখতে পাবেন এখানে <br/> ট্যাগ ব্যবহার করা হয়েছে। ফলে I love Techtunes  কথাগুলো তিনটি লাইনে প্রদর্শিত হবে। অর্থাৎ আউটপুট হিসেবে যা দেখাবে তা নিম্নে দেওয়া হল:

I love Techtunes.

I love Techtunes.

I love Techtunes.

Link:

এবার আসি লিংক এ। লিংক করতে গেলেও আমাদের মাথায় কিছু প্রশ্ন আসবে। প্রশ্নগুলো উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: HTML Link কি?

উত্তর: আমরা যখন কোন ওয়েবসাইট তৈরি করি তখন সেখানে অনেক লিংক ব্যবহার করি। প্রথমেই আমরা আগে বুঝতে চেষ্টা করি লিংক কি?

যেমন: অনেক সময় দেখা যায় আপনার বিশ্ববিদ্যালয়ের একটি মেয়েকে আপনার হঠাৎ করে পছন্দ হয়ে যায়। তখন আর কি করবেন আপনার তো সাহসে কুলায় না। তখন আপনি আপনার এক বান্ধবীকে হয়তো বলবেন দোস্ত আমার সাথে ঐ মেয়েটার লিংক করায়ে দেনা। এবার মনে হয় বুঝতে পারছেন লিংক কি? লিংক হল যোগসূত্র বা সংযোগ স্থাপন করা।

ওয়েবসাইটের ক্ষেত্রে লিংক হল একটি ওয়েবসাইটের এক পেজের সাথে অন্য পেজের সংযোগ স্থাপন। আরো সহজ ভাষায় বলতে গেলে আমরা যেকোন ওয়েব সাইটে মেনুবার/নেভিগেশন ব্যবহার করি। এখন আবার বলতে পারেন মেনুবার কি? মেনুবার হল যেখানে (Home, Contact us, About us) ইত্যাদি বাটন থাকে। এখন এই বাটনগুলোর যেকোন একটায় চাপ দিলে কি হয়? এটা আপনাকে অন্য একটা পেজে নিয়ে যায়। এর কারণ হিসেবে আপনি বলতে পারেন ঐ বাটনটিতে আগে থেকেই এই পেজটির লিংক করা ছিল।

দ্বিতীয় প্রশ্ন: HTML Link কিভাবে লিখব?

উত্তর: HTML Link লেখা খুবই সহজ। এটা লেখার জন্য আপনাকে <a> </a> ট্যাগ ব্যবহার করতে হবে। নিম্নের মত করে কোডটি টাইপ করুন।

<a href="https://www.techtunes.io">Techtunes</a>

উপরোক্ত কোডটি টাইপ করার পর আপনার মনে আরেকটি প্রশ্ন জাগতে পারে তা হল:

তৃতীয় প্রশ্ন: href দ্বারা কি বোঝানো হয়েছে?

উত্তর: href দ্বারা বোঝানো হয়েছে আপনি লিংকটি কোন পেজ অথবা কোন সাইটের সাথে করতে চান।

যাই হোক আউটপুট হিসেবে আপনাকে আপনার ব্রাউজার যা প্রদর্শন করবে তা নিম্নরূপ:

Techtunes

আর Techtunes কথাটিতে ক্লীক করার সাথে সাথেই আপনাকে Techtunes এর প্রথম পাতায় নিয়ে যাবে। বিশ্বাস না হলে একবার ক্লীক করে দেখুন।

এখন আপনি বললেন, না আমি যে পেজ এ অবস্থান করছি সেটা তো থাকবেই এবং ব্রাউজারের নতুন একটা ট্যাবে ক্লীক করা পেজটি ওপেন হবে। তাহলে,

চতুর্থ প্রশ্ন: কীভাবে নতুন ট্যাবে পেজ ওপেন হবে?

উত্তর: উপরোক্ত কোডটির সাথে সামান্য কিছু কোড যোগ করার মাধ্যমে আপনি কাজটি করতে পারেন। কোডটি নিম্নরূপ:

<a href="https://www.techtunes.io" target="_blank">Techtunes</a>

এখানে শুধুমাত্র অতিরিক্ত  target="_blank" এই কথাটি যুক্ত করা হয়েছে।

আউটপুট(একবার ক্লীক করে দেখুন না):

Techtunesগত পর্বে আমরা HTML ফাইল কিভাবে তৈরি করতে হয় তা শিখেছি। আজ আমরা HTML হেডিং, প্যারাগ্রাফ এবং লিংক সম্বন্ধে জানব।

HTML Heading:

HTML Heading সম্বন্ধে জানতে গিয়ে আমাদের মনে কিছু প্রশ্ন আসতে পারে। প্রশ্নগুলোর উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: HTML Heading কি?

উত্তর: আমরা যারা মাইক্রোসফট অফিস ব্যবহার করে থাকি তারা উপরের বারে প্রায়ই হেডিং(Heading) নামে একটা অপশন দেখি। এখন এই হেডিংটা আসলে কি? হেডিং এর কাজ লেখাকে একটি নির্দিষ্ট আকৃতি(Size) দেওয়া। এজন্য  অনেকগুলো হেডিং(Heading) ব্যবহার করা হয়। যেমন:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

দ্বিতীয় প্রশ্ন: HTML Heading কি কাজে ব্যবহার করা হয়?

উত্তর: এটি লেখার সৌন্দর্য বৃদ্ধির জন্য অর্থাৎ শিরোনাম থেকে বর্ণনাকে বা বর্ণনা থেকে শিরোনামকে আলাদাভাবে দেখানো জন্য ব্যবহার করা হয়।

তৃতীয় প্রশ্ন: HTML এ এটি কিভাবে কাজ করে বা কিভাবে লিখলে এটি আউটপুট প্রদর্শন করে।

উত্তর: প্রথমে নোটপ্যাড++ ওপেন করে নিচের কোডটি টাইপ করুন (কিভাবে এবং কোথায় করবেন তা জানতে পর্ব-1 দেখুন)। নোটপ্যাড++ না থাকলে এখানে ক্লীক করে ডাউনলোড করে নিন।

<h1>This is Heading one</h1>
<h2>This is Heading two</h2>
<h3>This is Heading three</h3>
<h4>This is Heading four</h4>
<h5>This is Heading five</h5>
<h6>This is Heading six</h6>

এরপর এটি যেকোন নামে অথবা heading.html নামে সেভ(save) করুন।

এরপর সেভ করা ফাইলটিতে ডাবল ক্লীক করার পর আউটপুট হিসেবে আপনার ব্রাউজার আপনাকে যা দেখাবে তা নিম্নে দেওয়া হল:

This is Heading one

This is Heading two

This is Heading three

This is Heading four

This is Heading five

This is Heading six

Paragraph:

এবার আসি প্যারাগ্রাফ। প্যারাগ্রাফ শুরু করতে গেলেই প্রথমেই আমাদের মনে কিছু প্রশ্ন আসবে। প্রশ্নগুলো উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: Paragraph কি?

উত্তর: আমরা প্রায় সবাই কোন না কোন বিষয় নিয়ে ওয়েব সাইট তৈরি করি। এখন তা হতে পারে কোন সফটওয়্যারের ওয়েবসাইট বা কোন গেমসের ওয়েব সাইট অথবা কোন শিক্ষামূলক ওয়েবসাইট। এখন ঐ ওয়েব সাইটের মধ্যে আমরা যে বিষয় নিয়ে ওয়েব সাইট তৈরি করি তা নিয়ে কিছু না কিছু লিখি। অর্থা‍ৎ সহজ ভাষায় বলতে গেলে আমরা ওয়েব সাইটে কোন কিছু লেখার জন্য এইচ.টি.এম.এল. এ যে ট্যাগ ব্যবহার করি তা হল Paragraph ট্যাগ।

দ্বিতীয় প্রশ্ন: Paragraph কিভাবে লেখা হয়?

উত্তর: Paragraph লিখতে হলে <p> </p> এই ট্যাগ ব্যবহার করতে হয়। উদাহরণসরূপ:

<p> Techtunes is the First Bangla Technology blog and we all love Techtunes. </p>

আউটপুট হিসেবে এটি যা দেখাবে তা নিম্নে দেওয়া হল:

Techtunes is the First Bangla Technology blog and we all love Techtunes.

তৃতীয় প্রশ্ন: একটি Paragraph কিভাবে ডানে, বামে কিংবা মাঝখানে লেখা যায়?

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

<p align ="right">This tag shows the paragraph right</p>
<p align = "center">This tag shows the paragraph center</p>
<p align = "left">This tag shows the paragraph left</p>

আউটপুট হিসেবে যা দেখাবে:

This tag shows the paragraph right

This tag shows the paragraph center

This tag shows the paragraph left

আশাকরি বলে দেওয়া লাগবে না কোন ট্যাগ কিভাবে কাজ করেছে।

চতুর্থ প্রশ্ন: প্যারাগ্রাফে আমরা কিভাবে নতুন লাইন আনব?

উত্তর: আমরা প্যারাগ্রাফ ট্যাগের মধ্যে কোনকিছু লিখলে তা সরলরেখায় চলতে থাকবে যদি না আমরা তার মধ্যে ব্রেক ট্যাগ ব্যবহার করি। কি একটু কঠিন লাগছে। আসলে এটা কোন কঠিন ব্যাপারই না। আমরা যখন মাইক্রোসফট ওয়ার্ড এ কোন কিছু লিখি তখন কীবোর্ডের এন্টার বাটন চাপলেই নতুন লাইন এসে যায়। কিন্তু HTML এর ক্ষেত্রে <br/> ট্যাগ ব্যবহার করতে হয়। একটু ঠান্ডা মাথায় নিম্নের উদাহরণটি দেখুন তাহলেই সব বুঝতে পারবেন।

প্রথম উদাহরণ:

<p>I love Techtunes. I love Techtunes. I love Techtunes. </p>

এই উদাহরণটিতে তিনবার I love Techtunes কথাটি বলা হয়েছে এবং এগুলো একই লাইনে প্রদর্শিত হবে। আউটপুট নিম্নরূপ:

I love Techtunes. I love Techtunes. I love Techtunes.

দ্বিতীয় উদাহরণ:

<p>I love Techtunes. <br/>
I love Techtunes. <br/>
I love Techtunes. </p>

দ্বিতীয় উদাহরণটির দিকে আপনি তাকালে দেখতে পাবেন এখানে <br/> ট্যাগ ব্যবহার করা হয়েছে। ফলে I love Techtunes  কথাগুলো তিনটি লাইনে প্রদর্শিত হবে। অর্থাৎ আউটপুট হিসেবে যা দেখাবে তা নিম্নে দেওয়া হল:

I love Techtunes.

I love Techtunes.

I love Techtunes.

Link:

এবার আসি লিংক এ। লিংক করতে গেলেও আমাদের মাথায় কিছু প্রশ্ন আসবে। প্রশ্নগুলো উত্তরসহ নিম্নরূপ:

প্রথম প্রশ্ন: HTML Link কি?

উত্তর: আমরা যখন কোন ওয়েবসাইট তৈরি করি তখন সেখানে অনেক লিংক ব্যবহার করি। প্রথমেই আমরা আগে বুঝতে চেষ্টা করি লিংক কি?

যেমন: অনেক সময় দেখা যায় আপনার বিশ্ববিদ্যালয়ের একটি মেয়েকে আপনার হঠাৎ করে পছন্দ হয়ে যায়। তখন আর কি করবেন আপনার তো সাহসে কুলায় না। তখন আপনি আপনার এক বান্ধবীকে হয়তো বলবেন দোস্ত আমার সাথে ঐ মেয়েটার লিংক করায়ে দেনা। এবার মনে হয় বুঝতে পারছেন লিংক কি? লিংক হল যোগসূত্র বা সংযোগ স্থাপন করা।

ওয়েবসাইটের ক্ষেত্রে লিংক হল একটি ওয়েবসাইটের এক পেজের সাথে অন্য পেজের সংযোগ স্থাপন। আরো সহজ ভাষায় বলতে গেলে আমরা যেকোন ওয়েব সাইটে মেনুবার/নেভিগেশন ব্যবহার করি। এখন আবার বলতে পারেন মেনুবার কি? মেনুবার হল যেখানে (Home, Contact us, About us) ইত্যাদি বাটন থাকে। এখন এই বাটনগুলোর যেকোন একটায় চাপ দিলে কি হয়? এটা আপনাকে অন্য একটা পেজে নিয়ে যায়। এর কারণ হিসেবে আপনি বলতে পারেন ঐ বাটনটিতে আগে থেকেই এই পেজটির লিংক করা ছিল।

দ্বিতীয় প্রশ্ন: HTML Link কিভাবে লিখব?

উত্তর: HTML Link লেখা খুবই সহজ। এটা লেখার জন্য আপনাকে <a> </a> ট্যাগ ব্যবহার করতে হবে। নিম্নের মত করে কোডটি টাইপ করুন।

<a href="https://www.techtunes.io">Techtunes</a>

উপরোক্ত কোডটি টাইপ করার পর আপনার মনে আরেকটি প্রশ্ন জাগতে পারে তা হল:

তৃতীয় প্রশ্ন: href দ্বারা কি বোঝানো হয়েছে?

উত্তর: href দ্বারা বোঝানো হয়েছে আপনি লিংকটি কোন পেজ অথবা কোন সাইটের সাথে করতে চান।

যাই হোক আউটপুট হিসেবে আপনাকে আপনার ব্রাউজার যা প্রদর্শন করবে তা নিম্নরূপ:

Techtunes

আর Techtunes কথাটিতে ক্লীক করার সাথে সাথেই আপনাকে Techtunes এর প্রথম পাতায় নিয়ে যাবে। বিশ্বাস না হলে একবার ক্লীক করে দেখুন।

এখন আপনি বললেন, না আমি যে পেজ এ অবস্থান করছি সেটা তো থাকবেই এবং ব্রাউজারের নতুন একটা ট্যাবে ক্লীক করা পেজটি ওপেন হবে। তাহলে,

চতুর্থ প্রশ্ন: কীভাবে নতুন ট্যাবে পেজ ওপেন হবে?

উত্তর: উপরোক্ত কোডটির সাথে সামান্য কিছু কোড যোগ করার মাধ্যমে আপনি কাজটি করতে পারেন। কোডটি নিম্নরূপ:

<a href="https://www.techtunes.io" target="_blank">Techtunes</a>

এখানে শুধুমাত্র অতিরিক্ত  target="_blank" এই কথাটি যুক্ত করা হয়েছে।

আউটপুট(একবার ক্লীক করে দেখুন না):

Techtunes