আগের পর্ব গুলো পড়ুনঃ
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ১ঃ প্রাথমিক ধারণা
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ২ঃ এইচটিএমএল এর গঠন ও এইচটিএমএল ট্যাগ
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৩ঃ এইচটিএমএল ট্যাগ ও এইচটিএমএল আট্রিবুটস
আজকে শিখবো এইচটিএমএল COMMENT ও এইচটিএমএল FORMETTING।
যে কোনও প্রোগ্রামিং ল্যাঙ্গুয়েজ এ কোডিং করার সময় ডেভেলপার এর সুবিধার জন্য COMMENT করতে হয়। এইচটিএমএল এ ও কোড করার সময় COMMENT করার পদ্ধতি আছে। তবে COMMENT গুলো আপনার সাইটে দেখা যাবে না। এটা শুধু কোডেই থাকবে। যখন অনেক বড় সাইটের জন্য কোড করবেন তখন হাজার হাজার কোড থাকবে। ধরেন, আপনি আপনার সাইটের কোনও অংশ পরিবর্তন করতে চান বা কোনও অংশ মুছে ফেলতে চান। তখন আপনাকে সাইটের ওই অংশের কোড টুকু পরিবর্তন করতে হবে বা মুছে ফেলতে হবে। কিন্তু হাজার হাজার কোডের মাঝে আপনার ওই অংশ টুকু খুজে পাওয়া অনেক কষ্টসাধ্য হবে। যদি আপনি সাইটের কোড ডেভেলপ করার সময় এইচটিএমএল COMMENT করে রাখেন তাহলে আর কোনও সমস্যাই থাকবে না। এইচটিএমএল COMMENT করার জন্য আপনাকে নিচের গঠন টি মনে রাখতে হবেঃ
<!-- Your comments -->
প্রথমে,
<!--
তারপর স্পেস দিয়ে আপনার comments এবং তারপর স্পেস দিয়ে
-->
কোড করার সময় একটা কথা মাথায় রাখবেন কোডিং এ কমা, সেমিকলন অথবা ব্র্যাকেট এর মিসিং হলে কোড সঠিক ভাবে কাজ করবে না।
নিচের কোড টি ব্রাউজার এ রান করান। দেখবেন COMMENT মধ্যে যা লিখেছি, তার একটাও ব্রাউজার এ দেখায় নি।
<!DOCTYPE html> <html> <head> <title>Title of your page which show on your title bar</title> </head> <body> <!-- This is a paragragh --> <p>This is a paragraph.</p> <!-- this is also paragragh --> <p>this is paragragh. For making website you need to use it.</p> <!-- this is link example --> <a href="http://riponshah.com">Mysite</a> <!-- these are headings --> <h1>this is h1 heading</h1> <h2>this is h2 heading</h2> <h3>this is h3 heading</h3> <h4>this is h4 heading</h4> <h5>this is h5 heading</h5> <h6>this is h6 heading</h6> <!-- this is div section --> <div>this is div section</div> <!-- this is button --> <button>Techtunes</button> <!-- this is blockquote --> <blockquote> Life is struggle and life is happiness .</blockquote> <!-- this is line break --> <br /> <br /> <!-- this is form section --> <form action=""> <input type="text" /> </form> </body> <!-- end of body --> </html>
আরেক প্রকার এইচটিএমএল COMMENT আছে যা ইন্টারনেট এক্সপ্লোরার এর জন্য ব্যবহার করা হয়। একে "Conditional Comments" বলা হয়। এর জন্য নিচের কোড টুকু দেখুনঃ
<!--[if IE 8]>
.... html for internet explorar ....
<![endif]-->
এটি এডভান্স কোডারদের জন্য। এটি সম্পর্কে পরে আরও বিস্তারিত লিখব।
এইচটিএমএল এ কিছু শর্ট ট্যাগ আছে যেগুলো লেখার (ফন্ট) কোনও পার্ট বা পুরো অংশকে বোল্ড বা চিকন বা ছোট করে দেয়। এইচটিএমএল এর জন্য নিচের ট্যাগ গুলো ব্যবহার করা হয়।
<b> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <mark>
আপনি নিচের কোড টুকু লিখে ব্রাউজার এ রান করান।
<!DOCTYPE html> <html> <head> <title>Title of your page which show on your title bar </title> </head> <body> <p>this is normal sentence</p> <p><b>this is bold</b> </p> <p><i>this is italic</i></p> <p><strong>this is strong sentence</strong></p> <p><small>this is small sentence</small></p> <p><mark>this is highlighted sentence</mark></p> <p>This is <sup>superscripted</sup> text.</p> <p>This is <sub>lower</sub> text.</p> <p>My favorite <ins>color</ins> is red.</p> <p>langra mangos' price <del>40/kg</del> 30/kg.</p> </body> </html>
দেখবেন নিচের স্রিনশট এর মত এসেছে। 
আশা করি বুঝতে পেরেছেন।আজকে এ পর্যন্তই। আগামী পর্বে নতুন কিছু নিয়ে আলোচনা করব। অবশ্যই আগের পর্ব গুলো পড়বেন। যারা ওয়েব ডিজাইন শিখতে চান তারা গুগল সার্চ করে এই বিষয় গুলো সম্পর্কে আরও জানুন ও বেশি বেশি প্র্যাকটিস করুন। কোনও প্রশ্ন থাকলে টিউনমেন্ট করুন।
পূর্বে এখানে প্রকাশিত।
আমি রিপন শাহ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 18 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
