একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল লিস্ট ও ফন্ট সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-4 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
এইচটিএমএল লিস্ট (List): এইচটিএমএল লিস্ট ও ফন্ট
ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভিতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমন
1.<ul>2.<li>Bangla</li>3.<li>English</li>4.<li>Social Science</li>5.<li>Mathemetaics</li>6.</ul>
প্রদর্শন:
- Bangla
- English
- Social Science
- Mathematics
আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।
Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমন
1.<ol>2.<li>iPad</li>3.<li>iPhone</li>4.<li>MacBook Air</li>5.</ol>
প্রদর্শন
- iPad
- iPhone
- MacBook Air
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে
1.<olstart="10">2.<li>iPad</li>3.<li>iPhone</li>4.<li>MacBook Air</li>5.</ol>
প্রদর্শন
- iPad
- iPhone
- MacBook Air
li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন
1.<ol>2.<livalue="5">iPad</li>3.<livalue="10">iPhone</li>4.<livalue="15">MacBook Air</li>5.</ol>
প্রদর্শন
- iPad
- iPhone
- MacBook Air
Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন
01.<dl>02.<dt>Preliminary analysis</dt>03.<dd> in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them</dd>04.<dt>Systems analysis, requirements definition</dt>05.<dd>Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs</dd>06.<dt>Systems design</dt>07.<dd>Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.</dd>08.<dt>Development</dt>09.<dd>The real code here</dd>10.</dl>
প্রদর্শন
- Preliminary analysis
- in this step, you need to find out the organization’s objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them
- Systems analysis, requirements definition
- Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs
- Systems design
- Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.
- Development
- The real code here
আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
এইচটিএমএল ফন্ট (Font): এইচটিএমএল লিস্ট ও ফন্ট
<font> ট্যাগ ব্যাবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়।
size, color এবং face attributes ব্যাবহার করে আপনি ফন্ট কে কাস্টমাইজ করতে পারি।
<basefont> ট্যাগ ব্যাবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়।
<font> এবং <basefont> ট্যাগ ব্যাবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যাবহার করা উচিত।
ফন্ট আকার (Font size)
Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)। ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।
1.<p>2.<fontsize="5">Here is a size 5 font</font>3.</p>{}
প্রদর্শন:
Here is a size 5 font.
ফন্ট রং (Font color)
কালার attribute এর সাহয্যে font এর color সেট করা হয়।
1.<fontcolor="#990000">This text is hexcolor #990000</font>2.<br/>3.<fontcolor="red">This text is red</font>
প্রদর্শন:
This text is red
ফন্ট ফেস (Font face)
ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনি ঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।
1.<p>2.<fontface="Bookman Old Style, Book Antiqua, Garamond">This paragraph3.has had its font...</font>4.</p>
প্রদর্শন:
This paragraph has had its font formatted by the font tag!
বেসফন্ট (Basefont)
Basefont ট্যাগ এর সাহায্যে আপনি ওয়েব পেজের ডিফল্ট ফন্ট সেট করতে পারেন।নিচে basefont ব্যাবহার করার সঠিক পথ দেখানো হল।
01.<html>02.<body>03.<basefontsize="2"color="green">04.<p>This paragraph has had its font...</p>05.<p>This paragraph has had its font...</p>06.<p>This paragraph has had its font...</p>07.</basefont>08.</body>09.</html>
প্রদর্শন:
* This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
শেষে বলতে চাই font বা basefont ব্যাবহার না করে সিএসএস (সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।
Attributes: Review
| Attribute= | “Value” | Description |
| size= | “Num. Value 1-7” | Size of your text, 7 is biggest |
| color= | “rgb,name,or hexidecimal” | Change font color |
| face= | “name of font” | Change the font type |
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
