আগের পর্ব গুলো পড়ুনঃ
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ১ঃ প্রাথমিক ধারণা
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ২ঃ এইচটিএমএল এর গঠন ও এইচটিএমএল ট্যাগ
আগের পর্বে আমরা এইচটিএমএল ট্যাগ সম্পর্কে প্রাথমিক ধারণা পেয়েছিলাম। আজ বিভিন্ন ট্যাগ এর কাজ সম্পর্কে আলোচনা করবঃ
আমি নিচে বিভিন্ন ট্যাগ এর নাম ও তার কাজ বর্ণনা করলামঃ
আরও অনেক ট্যাগ আছে সব বর্ণনা করলাম না।আপনি কোড এডিটরে নিচের কোড টুকু লিখে ব্রাউজার এ রান করান।
<!DOCTYPE html> <html> <head> <title>Title of your page which show on your title bar</title> </head> <body> <p>this is paragragh. For making website you need to use it.</p> <a href="http://riponshah.com">Mysite</a> <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> <div>this is div section</div> <button>Techtunes</button> <blockquote> Life is struggle and life is happiness .</blockquote> <br /> <br /> <form action=""> <input type="text" /> </form> </body> </html>
দেখবেন নিচের স্রিনশট এর মত এসেছে। 
এখানে লিঙ্ক, পারাগ্রাফ, হেডিং, ইনপুট, বাটন সব ঠিকঠাক এসেছে। এখন আসি এইচটিএমএল অ্যাট্রিবুটস।
এইচটিএমএল অ্যাট্রিবুটস হল এইচটিএমএল ট্যাগ এর এক্সটেনশন। এটি ট্যাগ এর কাজ কে আরও নির্দিষ্ট ও বিস্তারিত করে। এটি সবসময় ট্যাগের স্টারটিং পার্টে যোগ করতে হয়। ট্যাগ ছাড়া এটি কাজ করতে পারে না। অ্যাট্রিবুটস এর গঠন নিচে দেয়া হলঃ
<ট্যাগ অ্যাট্রিবুট= "ভ্যালু"> কন্টেন্ট </ট্যাগ> যেমনঃ
<p title="this is p title">this is attributes tutorial </p>
উপরের কোডটি বডি ট্যাগের মধ্যে দিয়ে ব্রাউজার এ রান করানঃ ফুল কোড টি এরকম হবেঃ
<!DOCTYPE html> <html> <head> <title>Title of your page which show on your title bar</title> </head> <body> <p title="this is p title">this is attributes tutorial </p> </body> </html>
নিচের স্রিনশট এর মত আসবে। ওই লেখার উপরে মাউস ধরে রাখলে title এ দেয়া বাক্য টি দেখাবে।
নিচে কিছু অ্যাট্রিবুটস এর উদাহরণ দিচ্ছিঃ
সোর্সঃ w3.org থেকে নেয়া।
বিভিন্ন ট্যাগের আলাদা আলাদা অ্যাট্রিবুটস থাকে। যেমনঃ নিচের কোড টুকু দেখেন। এখানে Anchor(a) ট্যাগের এর জন্য আমি ৪ টি অ্যাট্রিবুট ব্যবহার করেছি href, rel, target ও type। এখানে "href " লিঙ্ক প্রকাশ করে, "target " ব্রাউজার এর নতুন কোনও ট্যাব এ ওপেন হবে নাকি ওই ট্যাবেই ওপেন হবে তা প্রকাশ করে, "type" মিডিয়া টাইপ কিনা তা প্রকাশ করে ও "rel" বর্তমান ডকুমেন্ট ও লিঙ্কড ডকুমেন্ট এর মধ্যে সম্পর্ক প্রকাশ করে।
<!DOCTYPE html> <html> <head> <title>Title of your page which show on your title bar</title> </head> <body> <a href="http://riponshah.com" target="_blank" type="media_type" rel="nofollow"></a> </body> </html>
গ্লোবাল অ্যাট্রিবুটসঃ
কিছু অ্যাট্রিবুটস আছে যেগুলো সব ট্যাগের সাথেই ব্যবহার করা যায় এদের গ্লোবাল অ্যাট্রিবুটস বলা হয়। কিছু গ্লোবাল অ্যাট্রিবুটসঃ
accesskey class contenteditable - HTML5 contextmenu - HTML5 data-* - HTML5 dir draggable - HTML5 dropzone - HTML5 hidden- HTML5 id lang spellcheck - HTML5 style tabindex title translate- HTML5
আজকে এ পর্যন্তই। আগামী পর্বে নতুন কিছু নিয়ে আলোচনা করব। অবশ্যই আগের পর্ব গুলো পড়বেন। যারা ওয়েব ডিজাইন শিখতে চান তারা গুগল সার্চ করে এই বিষয় গুলো সম্পর্কে আরও জানুন ও বেশি বেশি প্র্যাকটিস করুন। কোনও প্রশ্ন থাকলে টিউনমেন্ট করুন।
পূর্বে এখানে প্রকাশিত।
আমি রিপন শাহ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 18 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
ভাই, নতুন টিউনগুলাতে আগের পর্বগুলার লিংকগুলা আপডেট করে দিলে ভাল হবে… যাতে যারা আগের টিউনগুলা মিস করছে, তারাও দেখতে পারে… pls
@মুনিরুল ইসলাম: আমি টেকটিউনস কর্তৃপক্ষের কাছে এই টিউটোরিয়াল গুলো কে চেইন টিউন করার জন্য আবেদন করেছি। চেইন টিউনের অন্তর্ভুক্ত হলে আগের টিউন গুলোর লিঙ্ক আপডেট থাকবে।
আজ সময় একটু কম তাই ভালভাবে ফলো করতে পারতেছিনা। পেজটা সেভ করে নিলাম ফ্রি হয়ে দেখব। সামনের টিউন আশা করছি।