HSC ICT Chaper 4 Part-5

Introduction to Web Design and HTML

In this HSC ICT Chapter 4 Part-5 : Introduction to Web Design And Html we will learn about What is Marquee tag and example , what is HTML list (Ordered list, Unordered List, Definition List) and example.

47.ওয়েবপেজের অলংকার ( What is Marquee Tag )

টেক্সট বা ইমেজকে বিভিন্ন দিকে স্ক্রলিং করানাের জন্য <marquee>....</marquee> ট্যাগটি ব্যবহৃত হয়। এর ফলে পেইজে অ্যানিমেটেড পরিবেশ সৃষ্টি হয়। হােম পেজটি সৌন্দর্য বৃদ্ধির জন্য HTML এর marquee এলিমেন্ট টিকে ব্যবহার করা যায়। ব্রাউজকারীর দৃষ্টি আকর্ষণ করতে এটি একটি ভালাে মাধ্যম। বিশেষ করে অনেক সময় ওয়েবপেইজে বিভিন্ন ঘােষণা প্রদর্শনের প্রয়ােজন পড়ে। তখন এসব স্ক্রলিং আইটেমগুলাে বিশেষ উপকার করে থাকে। <marquee> এবং </marquee> ট্যাগের অভ্যন্তরে টেক্সটে বা ইমেজের আচরণ নিয়ন্ত্রণের জন্য বিভিন্ন ধরনের অ্যাট্রিবিউট রয়েছে। নিম্নে <marquee> ট্যাগে ব্যবহার করা যায় এমন অ্যাট্রিবিউট গুলাের কার্যাবলী বর্ণিত হলাে:

অ্যাট্রিবিউট	Value	Description
Behavior	scroll	ট্যাগের অভ্যন্তরের টেক্সটি একপাশ থেকে অন্য পাশে scrolling করতে থাকবে। এর ডিফল্ট মান হলাে scroll.
	slide	টেক্সটি অন্য পাশের মার্জিন স্পর্শ করার সাথে সাথে বন্ধ হয়ে যাবে।
	alternate	টেক্সটি পেজের এপাশ থেকে ওপাশে বা সামনে পিছনে লাফাতে থাকবে।
direction	left	টেক্সটি ডান হতে বামদিকে scrolling করবে। তবে direction এর ডিফল্ট মান হলাে left.
direction	Right	টেক্সটি বাম হতে ডানদিকে scrolling করানাের জন্য।
bgcolor		ব্যাকগ্রাউন্ডের রং সৃষ্টি করে।
align	top, middle, bottom	marquee'র টেক্সটটি বসবে।
height	n অথবা n%	পিক্সেল দিয়ে (height=40) অথবা স্ক্রীন এর উচ্চতার ৫ দ্বারা। marquee এর উচ্চতা নির্ধারণ করে দেওয়া (height=40%)।
width	n অথবা n%	marquee’র প্রস্থ পিক্সেল অথবা ৫ দ্বারা নির্ধারণ করে দেয়া (width=20 অথবা width=20%)।
loop	n অথবা infinity	marquee’র টেক্সটটি কতবার আবর্তন করবে তা লুপ দ্বারা নির্ধারণ ।
scrolldelay	n	কত মিলিসেকেন্ডে সময়ে আবর্তন করবে তা নির্ধারণ করা হয় scrolldelay
scrollamoun		marquee কত দূরত্বে ঘােরাঘুরি করবে তা scroll amount অ্যাট্রিবিউট দ্বারা। এর মান নির্ধারণ করা হয় পিক্সেল দ্বারা।

Let see some example:

<!DOCTYPE html>
<html> 
    <head>

    </head>
    <body>

    <marquee behavior="scroll" direction="Left" > <p>ICT Coaching Center </p></marquee>
    <marquee behavior="slide" direction="Right"><p>ICT Coaching Center </p></marquee>
    <marquee behavior="alternate" direction="Left"><p>ICT Coaching Center</p></marquee>
    <marquee  direction="Left" scrolldelay="500"><p>ICT Coaching Center </p></marquee>
    <marquee  bgcolor="green"> <p>ICT Coaching Center </p></marquee>
                             
    </body>
</html>

Output

ICT Coaching Center

49.What is এইচটিএমএল লিস্ট ( HTML List ) ?

ডকুমেন্টকে সংগঠিতভাবে উপস্থাপন করার জন্য অনেকগুলি উপায়ের মধ্যে একটি উপায় হচ্ছে List। আমাদের প্রাত্যহিক জীবনে প্রায় সর্বত্রই List এর ব্যবহার দেখে থাকি। রেস্টুরেন্টে খাবার খেতে গেলে হাতে ধরিয়ে দেয় খাদ্যের মেনু লিস্ট। তাছাড়া রয়েছে টেলিফোন গাইড, স্কুলে বইয়ের লিস্ট ইত্যাদি। ঠিক তেমনিভাবে ওয়েবপেইজ তৈরির List হচ্ছে তথ্য সুসংগঠিত করার একটি মৌলিক উপায় । HTML সাধারণত তিন ধরনের লিস্ট সমর্থন করে। এগুলাে হলাে:
1.Bulleted (unordered) lists,
2.Numbered / lettered (ordered) lists,
3.Definition lists

অর্ডারড লিস্ট (Ordered list): এই লিস্টের আইটেমগুলাে নাম্বার তথা সংখ্যা দিয়ে চিহ্নিত করা হয়। এই লিস্ট। আইটেমের ভেতরে প্যারাগ্রাফ, লাইন ব্রেক ইমেজ, লিংক ও অন্যান্য লিস্টসমূহ বসানাে যায়। অর্ডার লিস্ট শুরু। হয় <ol> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম শুরু হয় <li>ট্যাগ দিয়ে । <ol> ট্যাগের অ্যাট্রিবিউট আছে দুইটি। যথা: type এবং start।
আনঅর্ডারড (Unordered list) : আনঅর্ডারড লিস্টগুলাে বুলেট (ছােট ছােট বৃত্ত) দ্বারা চিহ্নিত করা হয়। এই লিস্ট আইটেমের মধ্যেও প্যারাগ্রাফ, লাইন ব্রেক, ইমেজ, লিংক এবং অন্যান্য লিস্টসমূহ বসানাে যায়। আনঅর্ডারড লিস্ট শুরু হয় <ul> ট্যাগ দ্বারা এবং প্রতিটি লিস্ট আইটেম শুরু হয় <li> ট্যাগ দিয়ে।<li> হচ্ছে empty tag যার closing ট্যাগ না দিলেও চলে। <ul> ট্যাগের অ্যাট্রিবিউট আছে একটি। যথা: type । Type অ্যাট্রিবিউটসমূহ নিম্নরূপ :

ordered list type	unorderd list type
"A" হলে আউটপুট হবে A, B, C	type = "disc" হলে আউটপুট হবে •
type = "a" হলে আউটপুট হবে a, b, c	type = "circle" হলে আউটপুট হবে 0
type = "I" হলে আউটপুট হবে I, II, III	type = "square" হলে আউটপুট হবে square
type = "3" হলে আউটপুট হবে i, ii, iii

ডেফিনিশন লিস্ট (Definition list):ডেফিনিশন লিস্ট হচ্ছে HTML-এ ব্যবহৃত এক বিশেষ ধরনের লিস্ট যা গ্রোসারি লিস্ট নামেও পরিচিত। এই লিস্ট অন্যান্য লিস্ট হতে কিছুটা ভিন্ন ধরনের। ডেফিনিশন লিস্ট কোনাে একক আইটেমসমূহের তালিকা নয়। এর ফরম্যাট অনেকটা ডিকশনারির মতো। লিস্টের কোনাে আইটেমের জন্য যখন বর্ণনার প্রয়ােজন হয়, তখন এ ধরনের ফরম্যাট খুবই কার্যকরী। ডেফিনিশন লিস্ট দুটি অংশে বিভক্ত।
১. টার্ম (Term) যা আইটেম-এর বিষয়কে বােঝায়;
২. টার্মের বর্ণনা।
ডেফিনিশন লিস্ট শুরু হয় <df> ট্যাগ Definition list দিয়ে। প্রতিটি আইটেম শুরু হয় <dt> ট্যাগ (definition term) দিয়ে আর প্রতিটি বর্ণনা শুরু হয় <dd> ট্যাগ (definition description) দিয়ে। <dd> ট্যাগের মধ্যে প্যারাগ্রাফ, লাইন ব্রেক, ইমেজ, লিংক এবং অন্যান্য লিস্টসমূহ বসানাে যায় । এখানে উল্লেখ্য যে, <DD> এবং <DT>উভয়েই Empty ট্যাগ। এদের জন্য কোনাে Closing ট্যাগের প্রয়োজন হয় না। নিচের উদাহরণটি লক্ষ করলে এ সম্পর্কে আরও ভালােভাবে বুঝতে পারব। এজন্য নিচের পদক্ষেপগুলাে অনুসরণ করি। For an example:

<!DOCTYPE html>
  <html> 
      <head>
  
      </head>
      <body>
      <h4> A definition list : </h4>
      <dl>
        <dt> Rice  
            <dd>Made from paddy 
        <dt> Tea  
            <dd> Black not drink  
        <dt> Milk  
            <dd> white cold drink  
      </dl>
  </body>
  </html>

Output:

Rice: Made from paddy
Tea: Black not drink
Milk: white cold drink

47.Order list Unorder List ব্যাবহার করে নিচের পেজটি তৈরি করো ?

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

Coffee
Tea
Milk

<!DOCTYPE html>
  <html> 
      <head>
        <title>Using Order List Unorder List </title>
      </head>
      <body>

      <ol type = "1"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
      </ol> 

      <ol type = "A"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
      </ol> 

      <ol type = "I"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
      </ol>

      <ul type = "Circle"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
      </ul> 

      <ul type = "Square"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
      </ul> 
      
      </body>
  </html>

Best way of learing

Self learing is the best learing in the world. Discover yourself first then will get what you are And what you want to do .It will push you for self learing.

Why you need to learn coding?

Coding will play a vital role in one's life . It will help to open a new window of thinking . You can think better way than past . It helps to organise all the thing in better way .