ওয়েব ডিজাইনটিউটোরিয়ালসিরিজ

এইচটিএমএল (HTML5) এট্রিবিউট (সিরিজ-৪) !

0
html tutorial bangla

আজ আমরা আলোচনা করবো এইচটিএমএল এর  একটি গুরুত্বপূর্ণ অংশ এইচটিএমএল এট্রিবিউট  নিয়ে । এলিমেন্ট ব্রাউজারকে নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে  দেখানো হবে। যেমন <br/> এলিমেন্ট ব্রাউজারকে বলে একটা লাইন ব্রেক দেখাও। আবার <p></p> বলে একটা প্যারাগ্রাফ তৈরী করা ইত্যাদি। 

অনেক এলিমেন্ট আছে যারা ব্রাউজারকে দেয়া কাজের নির্দেশনার  সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই অতিরিক্ত নির্দেশনাকেই ওই এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। p এলিমেন্ট যখন ব্রাউজারকে প্যারাগ্রাফ প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই প্যারাগ্রাফটির রং কি হবে তাও বলে দিতে পারেন। যেমনঃ

1.<p style=”color red;”>HTML Attribute tutorial</p>

এট্রিবিউট লেখার সময় এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের (“” বা ”) ভিতর এর মান। (সব ছোট হাতের অক্ষরে)

এট্রিবিউট  গ্রুপ ৩ ধরনের আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। 

১। কোর এট্রিবিউটঃ id, class, title, style এইগুলোকে  কোর এট্রিবিউট বলে। 

২। গ্লোবাল এট্রিবিউটঃ contenteditable, contextmenu, draggable, dropzone এইগুলোকে  গ্লোবাল এট্রিবিউট বলে। 

৩। ইন্টারন্যাশলাইজেশান এট্রিবিউটঃ dir, lang  এইগুলোকে  ইন্টারন্যাশলাইজেশান এট্রিবিউট বলে।

এট্রিবিউট যেহেতু ডিজাইন এর ক্ষেত্রে কাজে লাগে সেহেতু আমরা সিএসএস নিয়ে আলচনার সময় এটা নিয়ে বিস্তারিত আলোচনা করবো।

প্যারাগ্রাফ ট্যাগ:

এরপর আরও একটা ইম্পরট্যান্ট বিষয় হল প্যারাগ্রাফ ট্যাগ। সাধারনত ওয়েবপেজ এ  কোন  কনটেন্ট প্রদর্শন করতে চাইলে তা প্যারাগ্রাফ ট্যাগের ভেতরে লিখতে হয়। যার শুরুর ট্যাগ <p> এবং শেষের ট্যাগ </p> এটা। যেমন 

C:\Users\ADMIN\Desktop\Untitled.png
C:\Users\ADMIN\Desktop\Untitl1ed.png

align, class, id, style, title এছাড়াও class এবং id এট্রিবিউট ব্যবহার করে  p এলিমেন্ট সহ  প্রায় সব এলিমেন্টে  সিএসএস স্টাইল করা হয়। সিএসএস টিউটোরিয়ালে আরো বিস্তারিত আলোচনা করা হবে

এখানে align, title এবং style এট্রিবিউটের কিছু প্রয়োগ দেখানো হল

C:\Users\ADMIN\Desktop\Untit45led.png
C:\Users\ADMIN\Desktop\Untfditled.png

লিস্ট ট্যাগ:

এরপর আমরা আলোচনা করবো ওয়েব পেজ এ কি ভাবে লিস্ট তৈরি করা যায় তা আমরা নিচে দেখবঃ

১। Unordered List ঃ প্রফেসনাল ভাবে এই লিস্ট সর্বাধিক বাবহিত হয়ে থাকে। যার কোড <ul></ul> এবং <li></li> এলিমেন্টের ভিতর একটা একটা করে আইটেম রাখতে হবে । আউট পুটে প্রতিটি লিস্ট এর আগে গোল একটা চিনহ আসবে নিচের ছবিতে দেখানো হলঃ

C:\Users\ADMIN\Desktop\Ul.png
C:\Users\ADMIN\Desktop\Untled.png

২। Ordered List: যার কোড <ol></ol> এবং <li></li> এলিমেন্টের ভিতর একটা একটা করে আইটেম রাখতে হবে । আউট পুটে প্রতিটি লিস্ট এর আগে নাম্বার লিস্ট আসবে নিচের ছবিতে দেখানো হলঃ

C:\Users\ADMIN\Desktop\ne.png
C:\Users\ADMIN\Desktop\Un45titled.png

 আজ তবে এই পর্যন্তই । খুব তাড়াতাড়ি আবার আসব পরবর্তী পর্বগুলো নিয়ে।

এপিক গেমস স্টোর থেকে ফ্রীতেই জিটিএ ৫ গেমস ডাউনলোড !!!(গেমস)

Previous article

ফেসবুক মেসেঞ্জার ডাউন !!!

Next article

You may also like

Comments

Leave a reply

Your email address will not be published.