সবইক সবগতম ও শভচছ ভবন শকষক পরচত ম মসতফ কমল সহকর অধযপক আইসট ID: 809268
Download The PPT/PDF document "ICT Information & Communication Tec..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
ICT
Information & Communication Technology
সবাইকে
স্বাগতম
ও
শুভেচ্ছা
ভুবনে
Slide2শিক্ষক পরিচিতি
মোঃ মোস্তফা কামাল
সহকারী অধ্যাপক, আইসিটি
মির্জাপুর আদর্শ মহিলা কলেজ
বাঘারপাড়া, যশোর।
Slide3ছবিগুলো
লক্ষ্য
করি
ছবিগুলো
দেখে
কি বুঝা যায়
?
ছবিগুলো
দেখে
কি
বুঝা
যায়
?
Slide4আমাদের আজকের পাঠ
-
HTML
–এ
list
এর
ব্যবহার
Slide5এই পাঠ শেষে শিক্ষার্থীরা-
১।
বিভিন্ন
ধরণের
লিষ্ট
সম্পর্কে
বলতে
পারবে
।
২
।
লিষ্ট
ব্যবহার
করে
ওয়েবপেজ
তৈরি
করতে
পারবে
।
Slide6HTML সাধারণত
তিন
ধরনের লিস্ট
সমর্থন
করে। এগুলো
হলো:
১। Numbered/lettered (ordered) lists
২
।
Bulleted
(unordered) lists,
৩
।
Definition
lists
Slide7এই
লিস্টের আইটেমগুলো নাম্বার তথা সংখ্যা দিয়ে চিহ্নিত করা হয়। এই লিস্ট আইটেমের ভেতরে প্যারাগ্রাফ, লাইন ব্রেক ইমেজ, লিংক ও অন্যান্য লিস্টসমূহ বসানো যায়। অর্ডারড লিস্ট শুরু হয় <
ol> ট্যাগ
দিয়ে এবং প্রতিটি লিস্ট আইটেম শুরু হয় <li> ট্যাগ
দিয়ে। <ol
> ট্যাগের অ্যাট্রিবিউট আছে দুইটি।
যথা: type এবং start ।Numbered/lettered
(ordered)
lists:
Slide8Bulleted
(unordered) lists:
আনঅর্ডারড
লিস্টগুলো
বুলেট (
ছোট ছোট
বৃত্ত) দ্বারা চিহ্নিত করা হয়। এই
লিস্ট
আইটেমের
মধ্যেও
প্যারাগ্রাফ
,
লাইন
ব্রেক
,
ইমেজ
,
লিংক
এবং
অন্যান্য
লিস্টসমূহ
বসানো
যায়
।
আনঅর্ডারড
লিস্ট
শুরু
হয়
<
ul
>
ট্যাগ
দ্বারা
এবং
প্রতিটি
লিস্ট
আইটেম
শুরু
হয়
<li>
ট্যাগ
দিয়ে
।
<li>
হচ্ছে
empty tag
যার
closing
ট্যাগ
না
দিলেও
চলে
।
<
ul
>
ট্যাগের
অ্যাট্রিবিউট
আছে
একটি
।
যথা
:
type
।
Slide9Ordered list type
Unordered
list type
type ="A"
হলে আউটপুট হবে
A,B,C
type = "disc" হলে আউটপুট হবে ●type = “a" হলে আউটপুট হবে
a,b,c
type = "circle"
হলে আউটপুট হবে
O
type = “
i
“
হলে আউটপুট হবে
i,ii,iii
type = "square"
হলে আউটপুট হবে
■
type = “
i
“
হলে আউটপুট হবে
i,ii,iii
Type
অ্যাট্রিবিউপট
সমূহ
নিম্নরুপ
:
Slide10Definition list:
এই
লিস্ট
অন্যান্য
লিস্ট হতে
কিছুটা
ভিন্ন ধরনের। ডেফিনিশন লিস্ট কোনো একক আইটেমসমূহের
তালিকা
নয়
।
এর
ফরম্যাট
অনেকটা
ডিকশনারির
মতো
।
লিস্টের
কোনো
আইটেমের
জন্য
যখন
বর্ণনার
প্রয়োজন
হয়
, তখন এ ধরনের ফরম্যাট
খুবই
কার্যকরী
।
ডেফিনিশন
লিস্ট
দুটি
অংশে
বিভক্ত
।
১.
টার্ম
যা
আইটেম-এর
বিষয়কে
বোঝায়
; ২.
টার্মের
বর্ণনা
ডেফিনিশন
লিস্ট
শুরু
হয়
<dl>
ট্যাগ
দিয়ে
।
প্রতিটি
আইটেম
শুরু
হয়
<
dt
>
ট্যাগ
দিয়ে
আর
প্রতিটি
বর্ণনা
শুরু
হয়
<
dd
>
ট্যাগ
দিয়ে
। <
dd
>
ট্যাগের
মধ্যে
প্যারাগ্রাফ
,
লাইন
ব্রেক
,
ইমেজ
,
লিংক
এবং
অন্যান্য
লিস্টসমূহ
বসানো
যায়
।
এখানে
উল্লেখ্য
যে
, <DD>
এবং
<DT>
উভয়েই
Empty
ট্যাগ
।
এদের
জন্য
কোনো
Closing
ট্যাগের
প্রয়োজন
হয়
না
।
Slide11১.
প্রথমে
Windows
প্রোগ্রামটি
চালু করতে হবে-
২.
এরপর
Start
বাটনে
ক্লিক কর
লে
আমরা
দেখতে
পাব
ওয়েবপেজ তৈরি করার
পদ্ধতি
Slide12৩
।
এরপর
All Programs
এর
উপর
ক্লিক
করতে
হবে
তাহলে
পাশের
মত
দেখতে
পাব
৪
।
এবারে
Accessories
এর
উপর
ক্লিক
করতে
হবে
ওয়েবপেজ তৈরি করার
পদ্ধতি
Slide13৫
।
তাহলে
আমাদের সামনে Accessories
মেনুর অধীনস্ত সকল প্রোগ্রাম
প্রদর্শিত হবে
৬
।
এখন
Notepad
প্রোগ্রামটি
র
ক্লিক করতে হবে
নিম্নরুপ
প্রোগ্রাম
ওপেন
হবে
।
ওয়েবপেজ তৈরি করার
পদ্ধতি
Slide14৭
।
এখন
আমরা
কোড লেখার
জন্য
এডিটর
পেয়ে
গেছি
তাই
এখানে
নিম্নের
মত
কোড
লিখি
।
<html>
<
body>
<
h4> Number list </h4>
<
ol
>
<li> Auto CAD <li> Web Design <li> VB <li> oracle
</
ol
>
<p> Now we write the Novel list but sequentially number : </p>
<
ol
start = "4">
<li>
Himu
<li>
Shamrat
<li>
Darajar opashey </OL> <HR/> <h4> Disc bullets list : </h4> <u1 type = "circle"> <li> Lemons <li> Mango <li> Guava </ul> </body> </html>
Slide15<html>
<body> <h4> Number list </h4> <ol> <li> Auto CAD <li> Web Design <li> VB <li> oracle </ol> <p> Now we write the Novel list but sequentially number : </p>
<ol start = "4"> <li> Himu <li> Shamrat <li> Darajar
opashey </OL> <HR/> <h4> Disc bullets list : </h4> <u1 type = "circle"> <li> Lemons <li> Mango <li> Guava </
ul> </body> </html>
৮
।
প্রথমে
ফাইল
মেনুর
উপর
ক্লিক
করতে
হবে
ফলে
আমাদের
সামনে
ফাইল
মেনু
প্রদর্শিত
হবে
।
ফাইল
সংরক্ষ
ণের নিয়ম
Slide16<html>
<body> <h4> Number list </h4> <ol> <li> Auto CAD <li> Web Design <li> VB <li> oracle </ol> <p> Now we write the Novel list but sequentially number : </p>
<ol start = "4"> <li> Himu <li> Shamrat <li> Darajar
opashey </OL> <HR/> <h4> Disc bullets list : </h4> <u1 type = "circle"> <li> Lemons <li> Mango <li> Guava </
ul> </body> </html>
৯
।
এবারে
File
মেনুর
Save
অপশনে
করব-
ফাইল
সংরক্ষ
ণের নিয়ম
Slide17<html>
<body> <h4> Number list </h4> <ol> <li> Auto CAD <li> Web Design <li> VB <li> oracle </ol> <p> Now we write the Novel list but sequentially number : </p>
<ol start = "4"> <li> Himu <li> Shamrat <li> Darajar
opashey </OL> <HR/> <h4> Disc bullets list : </h4> <u1 type = "circle"> <li> Lemons <li> Mango <li> Guava </
ul> </body> </html>
১০
।
তাহলে
আমাদের সামনে
Save
As
ডায়লগ বক্স
প্রদর্শিত হ
বে
heading.html
১২
।
Save
as type
এর
ড্রপ
ডাউন
লিষ্ট
–এ
ক্লিক
করে
All Files
সিলেক্ট
করে
দিতে
হবে
।
১১
।
এখন
File name
ঘরে
টেক্সবক্সে
আমরা
কাংখিত
ফাইলের
নাম
এবং
শেষে
এক্সটেনশন
হিসেবে
.html
দিব (
যেমন-
heading.html
)
ফাইল
সংরক্ষ
ণের নিয়ম
Slide1813
।
Save
হওয়ার
জা
য়গা নির্দ্
ধারণ
করে
দিতে
পারি
।
যেমন
ডেক্সটপে
সংরক্ষণ
করার
জন্য
ডায়লগ
বক্সের
বামপর্শে
Desktop
এর
উপর
ক্লিক
করি
।
14
।
এবারে
ডায়লগ
বক্সের
Save বাটনে ক্লিক
করি।
<html>
<body>
<p><font face = "
verdana
">This is a paragraph1</font> </p>
<p><font size= “7">This is paragraph2 </font> </ p>
<p><font color="green">This is paragraph3</font> </p>
</body>
</html>
heading.html
ফাইল
সংরক্ষ
ণের নিয়ম
Slide1915
।
ফলে
ফাইলটি
কম্পিউটারের
Desktop-
সংরক্ষন
হবে
।
ফাইল
সংরক্ষ
ণের নিয়ম
Slide20১৬
।
এবার
ওয়েব পেজটিকে
Open
করতে চাইলে-first.html ফাইল এর উপর ডাবল ক্লিক করতে হবে
।
তাহলে
নিম্নের
মত
ওয়েবপেজ
দেখতে
পাব
।
সংরক্ষিত
ফাইলটি
দেখা
Slide2117
।
Right
বাটনে
ক্লিক করি ১8। এবারে
open with
এর
উপর
ক্লিক
করি
১9
।
এবারে
firefox
এর
উপর
ক্লিক
করি
যেকোনো
ব্রাউজারে
ওয়বপেজ
দেখার
জন্য
Slide22তাহলে
নিম্নের
মত ওয়েবপেজ
দেখতে
পাবে।
Slide23একক কাজ
ঘ.
<dl>
খ.
<
dt
>
কোন
ট্যাগের
মধ্যে প্যারাগ্রাফ, লাইন ব্রেক,
ইমেজ,
লিংক
এবং
অন্যান্য
লিস্টসমূহ
বসানো
যায়।
ক.
<
ol
>
গ
.
<
dd
>
Slide24দলীয় কাজ
Pen, pencil,
khata
দিয়ে
একটি
অর্ডার
লিস্ট
তৈরি
কর
যা
aa
দিয়ে
শুরু
হবে
।
Pen, pencil,
khata
দিয়ে
একটি
আনঅর্ডার
লিস্ট
তৈরি
কর
সিম্বল
থাকবে
বৃত্ত
।
তোমার
তিন
বন্ধুর
বর্ণনা
দিয়ে
একটি
ডেফিনেশন
লিস্ট
তৈরি
কর
।
Slide25পাঠ মূল্যায়ন
অর্ডার
লিস্টে
কয়টি
অ্যাট্রিবিউট
ব্যবহৃত
হয়
?
আনঅর্ডার
লিস্টে
কয়টি
অ্যাট্রিবিউট
ব্যবহৃত
হয়
?
লিস্টে
কোন
ট্যাগটি
এম্পটি
ট্যাগ
?
Slide26বাড়ীর
কাজ
ওয়েবপেজে
লিস্টের
গুরুত্ব
লিখে
আনবে
।
Slide27