খুব দুঃখিত!! কিছু ব্যক্তিগত সমস্যার কারনে এতদিন পোস্ট করা হয় নি। এখন থেকে ইনশাল্লাহ আবার নিয়মিত পোস্ট করতে পারবো। আজকের পোস্ট হচ্ছে “৭ দিনে শিখুন HTML – ৩য় দিন — পর্ব ০৩”
তাহলে শুরু করা যাক।
১ম অধ্যায়ঃ- Computer Code Elements
আমার প্রোফাইল এ গিয়ে যদি দেখেন দেখবেন “পাইথন প্রোগ্রামিং” সিরিজের ১৫ টা পোস্ট আছে। সেখানে দেখবেন কোডগুলো আলদা ফন্ট এ লেখা। সাধারণ লেখা থেকে সেগুলো আলাদা থাকে। আবার এই পোস্টেও দেখছেন কোড গুলো আলাদা যেন সহজেই বোঝা যায়। এসমস্ত কোড গুলো করতে যে ইলিমেন্ট ব্যবহৃত হয় সেটা হচ্ছে Computer Code Elements.
<kbd> এর ব্যবহার।
আমরা হয়ত চাচ্ছি যিনি টিউটোরিয়াল পড়ছেন তিনি যেন বুঝতে পারেন যে কোনটুকু আসল কোড, কোনটুকু ইনপুট নেয়া এবং কোনটুকু আউটপুট নেয়া। এই ইনপুট নেয়া বোঝানোর জন্য ব্যবহৃত হয় <kbd>
<!DOCTYPE html> <html> <body> <p>The kbd element represents keyboard input:</p> <p><kbd>File | Open...</kbd></p> </body> </html>
এখানে দেখুন প্যারাগ্রাফ এর থেকে একটু আলাদা ফন্টে লেখা হয়েছে। বোঝায় যাচ্ছে সেটা। এটার ইন্ড ট্যাগ আছে।
<samp> এর ব্যবহার
ওই যে বলেছিনা কোনটুকু আউটপুট নেয়া সেটাও বোঝা যায়। সেই বোঝানোর জন্যই ব্যবহৃত হয় <samp>।
<!DOCTYPE html> <html> <body> <p>The samp element represents sample output from a computer program:</p> <samp> HTML output is showing </samp> </body> </html>
এখানে <samp> এর ভেতর আউটপুট দেখানো হচ্ছে। এটার ইন্ড ট্যাগ আছে।
<code> এর ব্যবহার
আমরা এতক্ষণ ইনপুট নেয়া এবং আউটপুট দেয়া দেখলাম এখন দেখবো কোড দেখানো। এটার জন্য ব্যবহৃত হয় <code>
<!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</body>
</html>
এখানে জাভাস্ক্রিপ্ট কোড এর উদাহরণ দিয়ে কোড এর ব্যবহার দেখলাম। কিন্তু, ব্রাউজারে শুধু এক লাইনেই দেখাচ্ছে। কিন্তু, কোড তো আর এক লাইনেই হয় না। তাই, যেমন লিখেছি সেরকমই দেখাতে ব্যবহৃত হয় <pre>
<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
</body>
</html>
এখন যেমন লিখেছি সেরকমই দেখাচ্ছে।
<var> এর ব্যবহার
আমরা কোথাও কিছু এমন লিখি যে, “তিনি বলেছেন ঃ- সদা সত্য বলবে” এখানে “তিনি বলেছেন” এটুকুকে অন্যভাবে দেখানো দরকার মূল কথাটার থেকে। তাহলে, সুন্দর লাগবে এবং বোঝাও যায় ভালো।
<!DOCTYPE html><html> <body> <p>Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.</p> </body> </html>
আউটপুট দেখে হয়তো পার্থক্য ধরতে পেরেছেন। উপরের সবগুলোর ই কিন্তু ইন্ড ট্যাগ আছে।
এবারে ২য় অধ্যায়ঃ- HTML Comments
প্রোগ্রামিং জগতে একটা মিম প্রচলিত আছে “আমি যখন কোড লিখি তখন শুধু আমি এবং সৃষ্টিকর্তা বোঝে, ২ মাস পর শুধু সৃষ্টিকর্তা বোঝে”। এটা চরম সত্য কথা। কিন্তু, কোড তো আর আমরা হাতে লিখি না তাহলে না বোঝার কি হল?? আসলে, কোড হাতে না লিখলেও কোন অংশ কিসের জন্য লেখা সেটা আমরা খুব সহজেই ভুলে যেতে পারি। তাই, আমরা যেন পরে বুঝতে পারি যে কোন অংশ কেন লিখেছি তার জন্য ব্যবহার করা হয় Comment elements. কমেন্টের ভেতর যা লিখা হয় তা শুধু সেখানেই বিদ্যমান। ব্রাউজারে কখনো দেখাবে না। কমেন্ট লেখার উদাহরণ নিচে দেখুন।
<!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html>
এই কোড টুকু লিখে ব্রাউজারে দেখুন শুধু This is a paragraph লেখা। আগের লাইন এবং শেষের ওই লাইন কিন্তু দেখাই নি। আসলে, এটা এজন্য লেখা হয় যেন অনেক বেশি কোড থাকলে সেটা ম্যানেজ করা সহজ হয়। কমেন্ট লিখতে প্রথমে <!– দিয়ে তারপর কমেন্ট লিখে শেষে আবার –> দিতে হয়।
বুঝেছেন বোধ হয়।
আর একটা কথা পাইথনের জনক গুইডো ভ্যান রজিউম বলেছেন, “আজেবাজে কমেন্ট করার থেকে কমেন্ট না করায় ভালো”। ঠিক তাই, এমন কমেন্ট করবেন না যেন বোঝা না যায়। সবসময় অর্থপুর্ণ কমেন্ট করতে চেষ্টা করবেন।
এবারে তৃতীয় অধ্যায়ঃ- HTML Colors
এটা ঠিক তেমন কোন স্পেশাল অধ্যায় না তবে জানা উচিৎ। আমরা লেখার বিভিন্ন কালার দিতে চাই বা বিভিন্ন জায়গায় অনেক রকম কালার দিতে চাই। এজন্য, আগে আমরা দেখেছি কালারের নাম উল্লেখ করার সিস্টেম। তবে, বিভিন্ন উপায়ে কালার দেয়া যায়।
আর একটা কথা হয়তো জানেন TV এবং Computer মুলত লাল (Red), সবুজ (Green) এবং নীল (Blue) এই তিনটা রং এর মিক্স দেখায়। এই তিনটা রং মিলেই সব গুলো সৃষ্টি করা হয়। এজন্য, Red, Green, Blue এই তিনটা রং এর প্রথম অক্ষর নিয়ে RGB বোঝানো হয়।
আমরা কয়েকটা পদ্ধতীতে রঙ এর কথা বোঝাতে পারি।
- কালারের নাম লিখে
- RGB ফরম্যাটে
- হেক্সাডেসিম্যাল পদ্ধতিতে
সবগুলো কালার এর লিস্ট পেতে এই লিংক এ ভিজিট করুন
www.w3schools.com/www.w3schools.com/colors/colors_picker.html
এবারে চতুর্থ অধ্যায়ঃ- HTML Links
আগে আমরা দেখেছি HTML Link এর ব্যবহার। কিন্তু, সেগুলো খুবই প্রাথমিক পর্যায়ের ছিল। তাই, আজকের পর্বে যতটা বিস্তারিত আলোচনা করা যায় করা হবে।
লিংক কিভাবে লেখে??
<a href="url">link text</a>
এখানে <a> হল লিংক ট্যাগ। এবং href এট্রিবিউট সেই ঠিকানা নির্ধারণ করে। তারপর link text এর জায়গায় লিংক এ কি টেক্সট থাকবে সেই কথাটা। এবং শেষে ইন্ড ট্যাগ।
একটা উদাহরণ দেখা যাক
<a href="https://www.trickbd.com">TrickBD Link</a>
<!DOCTYPE html> <html> <body> <p>The image is a link. You can click on it.</p> <a href="default.html"><img src="smiley.gif"/></a> </body> </html>
এখানে এই যে <a href=”default.html”> এটুকু আগে ব্যাখ্যা করি।
আসলে, আমরা যেখানে আমাদের এই html ফাইল তৈরি করেছি ঠিক সেখানেই আরেকটা html ফাইল তৈরি করেছি তার নাম দিয়েছি default.html । মানে, আমরা এই লিংক এ ক্লিক করলেই ওই default.html এ চলে যাবো। মানে, ওই html ফাইলে যা কিছু আছে আর কি তা দেখাবে।
এখন তারপরে তো আমাদের লিংক টেক্সট দেয়ার কথা। কিন্তু, আগেই বলেছি আমরা ইমেজ ও দিতে পারি। তাই আগে যেভাবে ইমেজ দেয়া শিখেছি সেভাবেই ইমেজ দিয়ে দিলাম link text এর যায়গায়। শেষে দিলাম ইন্ড ট্যাগ।।
বুঝাতে পেরেছি মনে হয়।
HTML Target Attribute
আচ্ছা আমরা কিছু লিংক এ ক্লিক করলে সেটা অন্য ট্যাবে ওপেন হয় এটাকি খেয়াল করেছি?? আবার কিছু লিংক এ ক্লিক করলে ওই ট্যাবেই ওপেন হয় (সাধারণত) আবার কিছু লিংক এ ক্লিক করলে ব্রাউজারের নতুন উইন্ডো তে ওপেন হ্য। এই যে কোথায় ওপেন হবে এটাই ঠিক করে দেয়া হয় মুলত Target Attribute দিয়ে।
<!DOCTYPE html> <html> <body> <a href="index.html" target="_blank">Visit our HTML tutorial!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p> </body> </html>
এখানে আমরা লিংক এর target এট্রিবিউট এর মধ্যে _blank দিয়েছি এটার মানে নতুন ট্যাবে ওপেন হবে। এরকম আরো কিছু টার্গেট আছে নিচে দেয়া হল।
- _blank —> নতুন ট্যাবে ওপেন হয়।
- _self —> এটা একি ট্যাবে অর্থাৎ নরমালি যেভাবে ওপেন হয়।
- _parent —> বর্তমান ফ্রেমে ওপেন হয়।
- _top —> যদি কোন ফ্রেমে থাকে তাহলে সম্পূর্ণ ট্যাবে ওপেন হয়।
HTML Links – Create a Bookmark
আমরা হয়তো দেখেছি যে কোন পেজে একটা লিংক আছে এবং সেটাতে ক্লিক করলে পেজের কোন একটা সেকশনে চলে যায়। অর্থাৎ ওই পেজেরই কোন একটা সেকশনে যায়। এটাকে বলে বুকমার্ক।
এজন্য আমাদের আগে কোন একটা প্যারাগ্রাফ বা যে সেকশন কে বুকমার্ক করতে চাই সেটাতে একটা আইডি দিতে হবে। মানে, যেন বোঝা যায় যে কোথায় বুকমার্ক হবে।
<!DOCTYPE html> <html> <body> <p><a href="#C7">Jump to Chapter 4</a></p> <h2 id="C1">Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2 id="C2">Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2 id="C3">Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2 id="C5">Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2 id="C6">Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2 id="C7">Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2 id="C8">Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2 id="C9">Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2 id="C11">Chapter 11</h2> <p>This chapter explains ba bla bla</p> </body> </html>
এখানে দেখুন প্রত্যেকটা হেডিং ট্যাগ এর সাথে id এট্রিবিউট দিয়ে একটা করে ID দেয়া হয়েছে। C1, C2 এভাবে করে আইডি গুলোর নাম দেয়া।
এবং প্রথমে একটা লিংক আছে, ওখানে যে যায়গায় লিংক এর ঠিকানা দেয়া হয় সেই যায়গায় একটা আইডির নাম দেয়া এবং নাম দেয়ার আগে # দেয়া আছে। যেমন এখানে দেয়া #C7 অর্থাৎ ওই লিংক এ ক্লিক করলে আইডি C7 এ চলে যাবে।
কোডটুকু নিজে লিখে ব্রাউজারে দেখুন বুঝতে পারবেন।
এখন মনে করলেন এই পেজের না একটা বাইরের লিংক এর বুকমার্ক করব তাহলে পেজ এর লিংক দিয়ে তার সাথে আইডি দিতে হবে।
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
এখানে প্রথমে পেজ এর লিংক দিয়ে তার সাথে tips নামের আইডি দিয়ে দিয়েছি। এখন ওই পেজের tips আইডিতে চলে যাবে।
আশা করি খুব ভালো লেগেছে এই লিংক এর কাজ। এটা অনেক মজার এবং খুব স্মার্ট একটা ইলিমেন্ট।
আজকের জন্য এই পর্যন্তই যদিও প্রত্যেক পর্বে ৫ টি চ্যাপ্টার দেয়ার কথা ছিল তবে একটা অধ্যায় দেই নি কারণ সেটা CSS কোর্স এর। ভুলে উল্লেখ করেছিলাম কোর্স আউটলাইনে।
আজ তাহলে চলে যাই তবে তার আগে একটা এক্সারসাইজ দেয়া বাকি আছে।
এমন একটি সাইট বানাবেন যেখানে একটা সুন্দর হেডিং থাকবে এবং আপনি কিছু কোড লিখবেন। যেন যেকেউ বুঝতে পারে এটা কোড সাধারন লেখা না। আর হ্যাঁ, কমেন্ট থাকে যেন না হলে আবার বোঝা যাবে না। তারপর, নিচের দিকে এসে কয়েকটা লিংক দিবেন। একটা আপনার ফেসবুক প্রোফাইলের, অন্যটা অন্য লোকাল লিংক এর মানে অফালাইন লিংক এবং বুকমার্ক যেন থাকে। আর হ্যাঁ, লিংক এ ক্লিক করলে যেন অন্য ট্যাবে ওপেন হয়।।
আসসালামু আলাইকুম!! ভালো থাকবেন ইনশাল্লাহ আগামী পোস্টে খুব মজার এবং এডভান্স কিছু অধ্যায় থাকবে।
আজকের মতো বিদায় যেকোন ভুল ক্ষমা করবেন!! ধন্যবাদ!
আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz