Html হেডিং ট্যাগ
পর্ব ২২
প্রথমে আমরা হেডিং ট্যাগ এর ব্যাবহার দেখবো। নিচের প্রোগ্রামটি লক্ষ্য করিঃ
<!DOCTYPE html>
<html>
<title> </title>
<head></head>
<body bgcolor=”white”>
<h1> Learn something new every day</h1>
<h2> Learn something new every day </h2>
<h3> Learn something new every day </h3>
<h4>Learn something new every day </h4>
<h5> Learn something new every day</h5>
<h6> Learn something new every day</h6>
</body>
</html>
এই প্রোগ্রামে <body bgcolor=”white”> ট্যাগটি ব্যাবহার করা হয়েছে প্রোগ্রামের ব্যাকগ্রাউন্ড কে সাদা রং দিতে। অর্থাত আমরা যখন ব্যাকগ্রাউন্ড এর রং পরিবর্তন করতে চাবো তখন <body bgcolor=”white”> লিখব। আপনি যদি সাদা রং ব্যাবহার করতে না চান মানে আপনার ইচ্ছে মতো রং পরিবর্তন করতে চান তাহলে আপনাকে কোটেশনের মধ্যে যে রং দিতে চান তা লিখতে হবে। যেমনঃ “black”, “green”, “blue”, “orange” ইত্যাদি।
এখন আসি হেডিং এ । অর্থাত এখানে <h1></h1> হেডিং টি অনেক বড় আকারের টেক্স কে নির্দেশ করে। তাপরের গুলো তুলোনামুলক ভাবে যথাক্রমে ছোট। যেমনঃ <h2></h2> , <h3> </h3> , <h4> </h4> <h5></h5> <h6> </h6> ইত্যাদি।
<h1></h1> থেকে <h6></h6> এর বেশি কোন হেডিং নেই।
আপনি প্রোগ্রামটি রান করুন তাহলেই বুঝতে পারবেন।
এবার আমরা প্যারাগ্রাফ লেখা শিখবো। এক্ষেত্রে আমরা <p></p> ট্যাগ ব্যাবহার করব।এবং <h2> </h2> হেডিং ট্যাগ ব্যাবহার করব। প্যারাগ্রাফের হেডিং দেবার জন্য আপনার আপনাদের পছন্দ মতো হেডিং নির্বাচন করবেন। এখন প্রোগ্রামটি লক্ষ্য করিঃ
<!DOCTYPE html>
<html>
<head>
<title> write any title here!</title>
</head>
<body bgcolor=”green”>
<h2> The unforgettable history <h2>
<p> My Brothers,</p>
<p> I stand before you today with a heart overflowing with grief . You are fully aware of the events that are going on and understand their import. We have been trying to do our best to cope with the situation.</p>
</body>
</html>
আপনারা প্রোগ্রামটি টাইপ করুন এবং রান করুন।
এই প্রোগ্রামে আমরা প্রায় সব গুলো ট্যাগের ব্যাবহার দেখব। যে ট্যাগ গুলো বাকি থাকবে সেগুলো পরে দেখানো হবে। চলুন তাহলে শুরু করা যাক।
<!DOCTYPE html>
<html>
<title> Write something here </title>
<head>
</head>
<body>
<a> learn something new every day </a>
<b> learn something new every day </b>
<i> learn something new every day </i>
<u> learn something new every day </u>
<abbr> learn something new every day</abbr>
<big> learn something new every day </big>
<em> learn something new everyday </em>
<del> learn something new every day </del>
<mark> learn something new every day </mark>
<s> learn something new every day </s>
<code> learn something new every day </code>
<pre> learn something new every day </pre>
<tt> learn something new every day </tt>
<command> learn something new every day </command>
<strong> learn something new every day </strong>
<small> learn something new every day </small>
<sub> learn something new every day </sub>
<sup> learn something new every day </sup>
<blink> learn something new every day </blink>
<q> learn something new every day </q>
<li> learn something new every day<br>
learn something new every day <br>
learn something new every day <br>
learn something new every day </li>
<ol> learn something new every day</ol>
<ul> learn something new every day </ul>
</body>
</html>
প্রোগ্রামটি আমরা লিখে ফেলি, এবং আউটপুট কমেন্ট করি।
আপনারা চাইলে প্রতিটি ট্যাগ আলাদা আলাদা প্রিন্ট করতে পারেন নিচের উদারণের মতো করে।
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<blink> learn something new every day </blink>
</body>
</html>
এভাবে। আপনারা নিজেরা চেষ্টা করতে থাকুন। কোন সমস্যা হলে কমেন্টে জানাবেন। আল্লাহ আপনাদের সকলকে সফল হবার তৌফিক দান করুন।
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is an example heading</h1>
<p>Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. Bangladesh is a beautiful country. </p>
</body>
</html>
এখানে <!DOCTYPE html> HTML5 কে ডিক্লেয়ার করে। অর্থাত ভার্সন কে ডিক্লেয়ার করে।
<html> এলিমেন্ট ওয়েব পেজের মুল। মূল ছাড়া যেমন গাছ বাচে না , ঠিক তেমনি <html> এলিমেন্ট ছাড়া প্রোগ্রাম সফল হয় না।
<head> এই এলিমেন্ট টি মুল তথ্যকে নির্দেশ করে/ হেডিং নির্দেশ করে।
<title> এই এলিমেন্ট টি ওয়েব সাইটের title নির্দেশ করে।
<body> এই এলিমেন্ট টি ওয়েব সাইটকে সাজানোর জন্য ব্যাবহার করা হয়।
<h1> এই এলিমেন্ট টি একটি বড় হেডিং নির্দেশ করে।
<p> এই এলিমেন্ট টি কোন কিছু প্যারা গ্রাফ আকারে লিখতে ব্যাবহার করা হয়।
এইচটিএম এল ট্যাগ গুলো সাধারণত জোড়ায় জোড়ায় থাকে। যেমন: <p> </p>
প্রথমটি কে বলে start tag এবং দ্বীতিয়টিকে বলে end tag,
শুরু ট্যাগে কোন স্ল্যাশ দিতে হয় না। কিন্তু , শেষ ট্যাগে অবশ্যই স্ল্যাশ (/) দিতে হবে।
Html links:
------------
<!DOCTYPE html>
<html>
<body>
<a href="https://freelancer.com">This is a link</a>
</body>
</html>
এখানে <a href=" "> </a> এলিমেন্ট টি লিংকিং করতে ব্যাবহার করা হয়।
ছবি যুক্ত করাঃ
<!DOCTYPE html>
<html>
<body>
<img src="http://asianetindia.com/wp-content/uploads/2013/…/Orchid.jpg" alt="google.com" width="104" height="142">
এখানে <img> ট্যাগটি ওয়েব পেজে ছবি যুক্ত করতে ব্যাবহার করা হয়।
এবং alt নামকরনের জন্য ব্যাবহার করা হয়।
<img src=" " > এলিমেন্ট দ্বারা ইমেজকে লিংকিং করা হয়।
width দ্বারা ইমেজের প্রস্থ সিলেক্ট করা হয়।
height দ্বারা ইমেজের দৈর্ঘ সিলেক্ট করা হয়।
</body>
</html>
Posts
No comments