HTML শিখুন নিজের ওয়েবপেজে ব্যাবহার করুন ‍Patr 1 to 15

Author Topic: HTML শিখুন নিজের ওয়েবপেজে ব্যাবহার করুন ‍Patr 1 to 15  (Read 15064 times)

Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আজকে আমি html এর একদম বেসিক জিনিষ দেখাব।সাথে থাকবেন।

***আপনাদেরকে html এর বেসিক format টা দেখাচ্ছি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   
<html>
 
<head>
 
<title>
 
</title>
 
</head>
 
<body>
 
</body>
 
</html>

***খেয়াল করুন সব লেখার শুরুটা হবে <html> দিয়ে আর শেষ হবে </html> এই লেখা দিয়ে।

***এই লেখার মাঝে <head> হতে </head> একটা পার্ট।আর <body> হতে </body> আরেকটা পার্ট।

***<head> হতে </head> এর মাঝে <title> আর </title> থাকে।

***আর এটা notepad এ লিখতে হবে।note pad এর জন্য start menu হতে notepad লিখে সার্চ দিতে হবে ।

*** তারপর তা যেকোন নাম তারপর একটা ডট দিয়ে html লিখে সেভ করতে হবে।যেমনঃ alif.html

***আসুন একটা example দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   
<html>
 
<head>
 
<title>
 
amra parbo
 
 </title>
 
</head>
 
<body>
 
amra emon ek jati zara sob korte pare
 
</body>
 
</html>

***এটা নোটপ্যাড এ লিখে alif.html নামে সেভ করুন।

***তারপর যেখানে সেভ করেছেন, সেখানে গিয়ে double click করে ওপেন করুন।
আপনার web page তৈরি হয়ে গেছে।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-২]
কোডটি অবশ্যই নোটপ্যাড এ লিখবেন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   
<html>
<head>
<title>
আমরা html শিখব
</title>
</head>
<body>
আমরা বাঙালি জাতি।
আমরা গর্বিত জাতি।
দেম আমাদেরকে অনেক কিছু দিয়েছে।
এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।
আসুন আমরা দেশের জন্য কিছু করি।
</body>
</html>

এখানে আমরা <body>……………..</body> এর মধ্যে একটা paragraph লিখেছি।এর প্রতিটি লাইন আমরা আলাদা আলাদা নিচে নিচে লিখেছি।তারপর আমরা তা aaa.html নামে সেভ করি।তারপর তা ওপেন করলে ব্রাউজার এ নিচের মত দেখাবে।


দেখুন লাইনগুলো আলাদা আলাদা না দেখিয়ে একসাথে দেখিয়েছে।

এখন আমরা যদি লাইনগুলো নিচে নিচে দেখাতে চাই তবে আমাদের একটি tag ব্যাবহার করতে হবে।ট্যাগটি হল 
 ট্যাগ।

***যেকোন লাইন এর শেষে এই ট্যাগ ব্যাবহার করলে পরের লাইনটি নিচ থেকে শুরু হবে।

তাহলে আসুন আগের html code এর body এর প্রতিটি লাইন এর শেষে
 ট্যাগ ব্যাবহার করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
আমরা html শিখব
 
</title>
 
</head>
 
<body>
 
আমরা বাঙালি জাতি।

 
আমরা গর্বিত জাতি।

 
দেম আমাদেরকে অনেক কিছু দিয়েছে।

 
এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।

 
আসুন আমরা দেশের জন্য কিছু করি।

 
</body>
 
</html>

এবার এটি asa.html(যেকোন নাম.html) নামে সেভ করুন।তারপর double click করে ওপেন করুন।




Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আমরা দেখেছিলাম কিভাবে
 ট্যাগ ব্যাবহার করতে হয়।
 ট্যাগ ব্যাবহার করলে লাইনগুলো নিচে নিচে সজ্জিত হয়।কিন্তু আমাদের যদি এমন দরকার হয় যে লাইনগুলোর মাঝে ফাকা লাইন থাকবে।তখন আমরা কি করব।

***তখন আমরা <p>……………..</P>  ট্যাগ ব্যাবহার করব।আসুন এবার আমরা দেখি কিভাবে এর ট্যাগ ব্যাবহার করা যায়।

***আগের টিউন এর নিয়ম অনুসারে
 ট্যাগ ব্যাবহার করে আমরা একটি html কোড লিখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
আমরা html শিখব
 
</title>
 
</head>
 
<body>
 
আমরা বাঙালি জাতি।

 
আমরা গর্বিত জাতি।

 
দেশ আমাদেরকে অনেক কিছু দিয়েছে।

 
এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।

 
আসুন আমরা দেশের জন্য কিছু করি।

 
</body>
 
</html>

***তারপর তা ara.html(যেকোন নাম.html) নামে সেভ করুন।

***তারপর double click করে ওপেন করুন।দেখুন লেখাগুলো নিচে নিচে এসেছে।কিন্তু মাঝে কোন ফাকা লাইন নেই।



ফাকা লাইন এর জন্য আসুন আমরা  <p>………………………</p>  ট্যাগ ব্যাবহার করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
আমরা html শিখব
 
</title>
 
</head>
 
<body>
 
<p>আমরা বাঙালি জাতি।</p>
 
<p>আমরা গর্বিত জাতি।</p>
 
<p>দেশ আমাদেরকে অনেক কিছু দিয়েছে।</p>
 
<p>এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।</p>
 
<p>আসুন আমরা দেশের জন্য কিছু করি।</p>
 
</body>
 
</html>

***এবার তা aqa.html নামে সেভ করে ওপেন করে দেখুন লাইন গুলোর মাঝে ফাকা লাইন তৈরি হয়েছে।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আমরা দেখেছিলাম <p>………………..</p> ট্যাগ এর ব্যাবহার।এই ট্যাগ ব্যাবহার করলে দুই লাইন এর মাঝখানে এক লাইন এর সমান ফাকা সৃষ্টি হবে।কিন্তু যদি যদি আমাদের এমন কোন প্রয়োজন হয় যে দুই লাইন এর মাঝখানে এক লাইন এর অধিক ফাকা লাইন তৈরি করতে হবে।তখন আমরা কি করব।কোন চিন্তা নেই।সেই সমস্যারও সমাধান আছে।আজকের টিউন এ আমরা সেই ব্যাপার নিয়ে আলোচোনা করব।

***প্রথমে আগের পর্বের নিয়ম অনুসারে <p>………..</p> ট্যাগ ব্যাবহার করে একটি কোডিং লিখুন।আর এই কোডিং কিন্তু অবশ্যই notepad এ লিখবেন।

<html>

<head>

<title>

আমরা html শিখব

</title>

</head>

<body>

<p>আমরা বাঙালি জাতি।</p>

<p>আমরা গর্বিত জাতি।</p>

<p>দেশ আমাদেরকে অনেক কিছু দিয়েছে।</p>

<p>এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।</p>

<p>আসুন আমরা দেশের জন্য কিছু করি।</p>

</body>

</html>

***তারপর তা asa.html নামে সেভ করে double click করে ওপেন করুন।দেখুন দুই লাইন এর মাঝে এক লাইন এর সমান ফাকা তৈরি হয়েছে।



***এবার আসুন দেখি কিভাবে দুই লাইন এর মাঝে একের অধিক লাইন ফাকা রাখা যায়।এজন্য আমাদের <p>……………….</p>&nbsp  ট্যাগ ব্যাবহার করতে হবে। আসুন এই ট্যাগ ব্যাবহার করে নতুন করে কোডিংটা লিখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
   
<html>
 
<head>
 
<title>
 
আমরা html শিখব
 
</title>
 
</head>
 
<body>
 
<p>আমরা বাঙালি জাতি।</p>&nbsp
 
<p>আমরা গর্বিত জাতি।</p>&nbsp
 
<p>দেশ আমাদেরকে অনেক কিছু দিয়েছে।</p>&nbsp
 
<p>এবার আমাদের দায়িত্ব দেশের জন্য কিছু করা।</p>&nbsp
 
<p>আসুন আমরা দেশের জন্য কিছু করি।</p>&nbsp
 
</body>
</html>

***এবার awa.html নামে এ সেভ করে double click করে ওপেন করুন।দেখুন একের অধিক লাইন এর সমান ফাকা তৈরি হয়েছে।

http://s.techtunes.com.bd/tDrive/tuner/sabihas13/83092/Edit_2011-08-18_1.png

Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-৫]
***প্রথমে একটি html কোডিং লিখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   
<html>
 
<head>
 
<title>
 
আমরা html শিখি
 
</title>
 
</head>
 
<body>
 
আমরা   বাঙালি   জাতি।
 
</body>
 
</html>

***আপনি <body>………………</body> এর বাংলা লাইনটুকুর মাঝে যতই ফাকা রাখুন,ব্রাউজার এ এক স্পেস পরিমান ফাকা দেখাবে। দেখুন এই ফাইলটুকু সেভ করে ওপেন করলে ব্রাউজার এ কেমন দেখাবে ।



***এবার আসুন কিভাবে এই সমস্যার সমাধান করবেন।আপনি লাইনে দুইটি ওয়ার্ড এর মাঝে যতবার &nbsp যোগ করবেন ,ঠিক ততবার একটি করে ফাকা জায়গা তৈরি হবে।

***আসুন এবার কোডিংটুকু change  করে এভাবে লিখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   
<html>
 
<head>
 
<title>
 
আমরা html শিখব
 
</title>
 
</head>
 
<body>
 
আমরা &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp বাঙালি &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp জাতি।
 
</body>
 
</html>

কোডটি কিন্তু অবশ্যই নোটপ্যাড এ লিখবেন।তারপর ava.html(যেকোন নাম.html) নামে সেভ করে double click করে ওপেন করুন।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-৬]
***আজকে আমরা আলোচোনা করব heading element নিয়ে।

***প্রথমে আপনাদের মাথায় আসতে পারে heading element কী?

***ধরুন আপনি একটি paragraph লিখছেন।এখন এই পারাগ্রাফ এর শিরোনাম দিতে হবে।তারপর paragraph এর বিষয়বস্তু।আজকে আমরা শিখব কিভাবে এই শিরোনাম দিতে হয়।

***এই শিরোনাম দিতে যে ট্যাগ ব্যাবহার হরা হয় তা হচ্ছে <h1>…………………</h1>  ট্যাগ।তো আসুন দেখি কিভাবে এই ট্যাগ ব্যাবহার করা যায়।

***এই ট্যাগ ব্যাবহার করা খুবই simple.আপনি যেই লাইনকে শিরোনাম বানাতে চান,সেই লাইন এর শুরুতে <h1>  আর লাইন এর শেষে </h1>  অ্যাড করুন। আসুন এবার এই নিয়ম অনুসারে একটি কোডিং করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   
<html>
 
<head>
 
<title>
 
আমরাও পারি।
 
</title>
 
</head>
 
<body>
 
<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>
 
<p>আমাদের ছোট দেশটির নাম বাংলাদেশ।এই বাংলার আনাচে কানাচে ছড়িয়ে ছিটিয়ে আছে কিছু উদ্দমি মানুষ।যারা দেশকে ভালবাসে নিজের জীবনের থেকেও বেশী।তারা দেশের জন্য কিছু করে সবার কাছে বলে বেড়ায়  না যে আমি দেশের জন্য এই কাজটা করেছি।তাদের এই অবদান শুধু দেশ জানে আর সে নিযে জানে।এরাই হল সত্তিকারের মানুষ।মানুষের মত মানুষ।আর কিছু মানুষ আছে যেমন আমাদের রাজনীতির রুই-কাতলারা,তারা দেশের জন্য কত কিছু করছে!!!!!!দেশের উন্নয়নের চিন্তায় তাদের নাকি ঘুম আসে না।এই সব রুই কাতলাদের যখন সত্যিকারের মানুষের পাশে দাড়া করাবেন তখন আপনারই অপমান লাগবে যে আপনি ফেরেশতাদের সাথে নরকের কীটকে দাড়া করিয়েছেন।</p>
 
</body>
 
</title>

***এখানে <h1>............</h1> দিয়ে heading আর <p>...........</p> দিয়ে paragraph indicate করেছে।

***এবার এটিকে নোটপ্যাড এ লিখে সেভ করে double click করে ওপেন করুন।


এতক্ষন আমারা শিখলাম কিভাবে heading দেওয়া যায়।এবার আমরা শিখব heading এর নানা রুপ নিয়ে।

    <h1>............</h1>
    <h2>............</h2>
    <h3>............</h3>
    <h4>............</h4>
    <h5>............</h5>
    <h6>............</h6>

***আপনাদের মনে প্রশ্ন আস্তে পারে h1,h2,h3,h4,h5,h6 কেন??এবার আসুন এই বিষইয়ে একটু কথা বলি।

***খুবই সহজ ব্যাপার। h1 হতে ক্রমানুসারে যত নিচের দিকে নামতে থাকবে heading তত ছোট হতে থাকবে।মানে <h1>........</h1>  হতে <h2>.......</h2> এর heading ছোট। আর <h6>.......</h6> এর heading সবছেয়ে ছোট।

***তাহলে আসুন এবার বাস্তব উদাহরন দেখি।আপ্নারা আমার সাথে এই কোডিংটুকু লিখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   
<html>
 
<head>
 
<title>
 
আমরাও পারি।
 
</title>
 
</head>
 
<body>
 
<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>
 
<h2>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h2>
 
<h3>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h3>
 
<h4>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h4>
 
<h5>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h5>
 
<h6>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h6>
 
</body>
 
</title>

***আমাদের কোডিং লেখা শেষ।এবার এটাকে aya.html নামে সেভ করে double click করে ওপেন করুন।




Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-৭]
আজকে আমি font সংক্রান্ত বিভিন্ন ট্যাগ নিয়ে আলোচোনা করব।মানে font এর আকার,আকৃতি,ধরন এসবের নানা ট্যাগ নিয়ে আলোচোনা করব।
bold ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে আপনার লাইন এর অক্ষরগুলো গাঢ় দেখাবে।এই ট্যাগ এর  নিয়ম হচ্ছে ……………………………….
italic ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে লাইন এর অক্ষরগুলো একটু বাকা দেখাবে।এই ট্যাগ এর নিয়ম হচ্ছে ................................
blink ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে আপনার লাইন এর অক্ষরগুলো জলা-নেভা করবে।এই ট্যাগ ব্যাবহার করার নিয়ম হচ্ছে <blink>………………..</blink>
emphasis ট্যাগঃ

ধরুন আপনি একটা লাইন এর অক্ষরগুলো ইতালিক বাকা অক্ষরে লিখবেন,কিন্তু গাঢ় তখন আপনাকে emphasis ট্যাগ ব্যাবহার করতে হবে।এই ট্যাগ ব্যাবহার করার নিয়ম হচ্ছে …………………
strong ট্যাগঃ

অনেকে একটা লাইন এর অক্ষরগুলো গাঢ় করার জন্য bolt ট্যাগ এর বদলে strong ট্যাগ ব্যাবহার করে।এই ট্যাগ এর নিয়ম হচ্ছে <strong>……………………</strong>
underline ট্যাগঃ

এই ট্যাগ ব্যাবহার করে কোন লেখার নিচে দাগ দেওয়া হয়।এই ট্যাগ এর নিয়ম হচ্ছে ………………..
strike ট্যাগঃ

এই ট্যাগ এর ব্যাবহার underline ট্যাগ এর মত।লেখার নিচে দাগ দেওয়ার জন্য এই ট্যাগ ব্যাবহার করা হয়।এই ট্যাগ এর নিয়ম হচ্ছে <strike>………………</strike>
big ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে লাইনটির অক্ষরগুলো বড় দেখাবে। এই ট্যাগ এর নিয়ম হচ্ছে <big>……………………..</big>
small ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে একটা লাইন এর অক্ষরগুলো ছোট দেখায়। এই ট্যাগ এর নিয়ম হচ্ছে <small>……………..</small>
type writer ট্যাগঃ

এই ট্যাগ ব্যাবহার করলে ওই লাইন এর অক্ষরগুলো আগেরকার আমলের টাইপ রাইটার মেশিন এর অক্ষরের মত দেখাবে। এই ট্যাগ এর নিয়ম হচ্ছে <tt>………………..</tt>
subscript ট্যাগঃ

একটি লাইন এর কোন অক্ষরকে বা কোন অংশকে একঘর নিচে নামানোর দরকার হয় তখন এই ট্যাগ ব্যাবহার করা হয়। এই ট্যাগ এর নিয়ম হচ্ছে <sub>………………</sub>
superscript ট্যাগঃ

একটি লাইন এর কোন অক্ষরকে বা কোন অংশকে একঘর উপরে উঠানোর দরকার হয় তখন এই ট্যাগ ব্যাবহার করা হয়। এই ট্যাগ এর নিয়ম হচ্ছে <sup>………….</sup>

এতোক্ষন আমরা দেখলাম কিভাবে এই ট্যাগগুলো ব্যাবহার করা যায়।এবার আমরা দেখব এর বাস্তব প্রয়োগ।উপরের ট্যাগ গুলো ব্যাবহার করে আসুন একটা কোডিং তৈরি করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
   
<html>
 
<head>
 
<title>
 
We love
 
</title>
 
</head>
 
<body>
 
we love

 
we love

 
<blink> we love </blink>

 
we love DIU

 
<strong> we love DIU</strong>

 
<strike> we love </strike>

 
we love

 
<big> we love </big>

 
<small> we love </small>

 
<tt> we love </tt>

 
This is water H<sub>2</sub>O

 
This is mathematical term  A<sup>2</sup>+B<sup>2</sup>
 
</body>
 
</html>

***তারপর তা rea.html নামে সেভ করে double click করে ওপেন করুন।দেখুন কেমন দেখা যাচ্ছে।



যদি কোন কিছু না বুঝে থাকেন তবে আমাকে জানান।সবাই ভাল থাকবেন।
« Last Edit: December 31, 2011, 02:03:15 PM by bbasujon »

Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-৮]
font size ট্যাগঃ

এই ট্যাগ দিয়ে কোন লাইন এর অক্ষরগুলোর সাইজ ছোট-বড় করা যায়।সাধারনত প্রতিটি font এর ডিফল্ট size ১২ দেওয়া থাকে।আমরা এই ট্যাগ ব্যাবহার করে আমরা এর সাইজ +৭ পর্যন্ত বাড়ানো সম্ভব,আর এর সাইজ -৭ পর্যন্ত কমানো সম্ভব।+৭ এর বেশি আর -৭ এর কম নিলে এই ট্যাগ কাজ করবে না।

এবার আসুন এই ট্যাগ এর গঠন দেখি।<font size=-7 হতে +7>...............................</font>

***এবার আসুন আমরা একটা উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
   
<html>
 
<head>
 
<title>
 
We loveBangladesh
 
</title>
 
</head>
 
<body>
 
<Font size=+6>we live in a small country.</font>

 
<Font size=+4>we have a lot of problem.</font>

 
<Font size=+2>most of our people are poor.</font>

 
<Font size=+1>we have no food,no shelter,no education.</font>

 
<Font size= -1>this is enough problem for a country.</font>

 
<Font size= -2>but,always we are in a smile face.</font>

 
<Font size= -3>because,we have a dream.</font>

 
<Font size= -4>some of our student has a dream.they worked,work,will work for his motherland</font>

 
<Font size= -5>so what can you do???? This is your choice.</font>
 
</body>
 
</html>

***এই কোডিং অবশ্যই notepad এ লিখতে হবে।তারপর,aka.html নামে সেভ করে double click করে ওপেন করুন।



font face ট্যাগঃ

এই ট্যাগ ব্যাবহার করে বিভিন্ন style এর font ব্যাবহার করা যায়।আমরা মাইক্রোসফট ওয়ার্ড এ যেসব বিভিন্ন font ব্যাবহার করেছি,html এ তার সব ব্যাবহার করা যাবে।শুধু font এর নাম জানতে হবে।যেমন arial font,vrinda font.

এবার আসুন আমরা এই ট্যাগ এর নিয়মটা শিখি।<font face=যেকোন ফন্ট এর নাম>............</font>

***এবার আসুন আমরা একটা উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
   
<html>
 
<head>
 
<title>
 
We loveBangladesh
 
</title>
 
</head>
 
<body>
 
<Font face=arial>we live in a small country.</font>

 
<Font face=bodony mt black>we have a lot of problem.</font>

 
<Font face=forte>most of our people are poor.</font>

 
<Font face=impact>we have no food,no shelter,no education.</font>

 
<Font face=times new roman>this is enough problem for a country.</font>

 
<Font face=segoe script>but,always we are in a smile face.</font>

 
<Font face=castellar>because,we have a dream.</font>

 
<Font face=batang>some of our student has a dream.they worked,work,will work for his motherland</font>

 
<Font face=Blackadder ITC >so what can you do???? This is your choice.</font>
 
</body>
 
</html>

***এবার এটি ata.html নামে সেভ করে double click করে ওপেন করুন।



***আপনারা বিভিন্ন font এর নাম কোথায় পাবেন এই নিয়ে চিন্তা করছেন????আপ্নারা মাইক্রোসফট অফিস ওয়ার্ড  ওপেন করে image এর দেখানো যায়গায় ক্লিক করুন তারপর আপনার পছন্দের font এর নামটি জেনে নিন।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-৯]
আজকের বিষয়টা একটু কঠিন।একটু মনোযোগ দিয়ে দেখুন।সহজ লাগবে।আর যদি কোন অংশ না বুঝতে পারেন,তবে আমাকে জানান।যদি আমি জানি তাহলে আপনাদের জানিয়ে দিব

Font color ট্যাগঃ

আমাদের আজকের বিষয় font color ট্যাগ নিয়ে।আমরা কোন লাইন এর বিভিন্ন অক্ষর বা ফন্ট কিভাবে বিভিন্ন রং এ রঞ্জিত করব তা দেখব।

***প্রথমে আমরা font color ট্যাগ এর ফরম্যাট দেখে নেই

<font color = 16 টি মৌলিক কালার যেকোন একটির নাম বা,হেক্সাডেসিমাল কালার কোড যেমনঃ (#6633ff)>..................................................................</font>

***আসুন এবার ব্যাপারগুলো নিয়ে আলোচোনা করি।আপনারা font color এ ১৬টি মৌলিক রং এর যেকোন একটির নাম দিলে ফন্টটি বা অক্ষরটি সেই রঙে রঞ্জিত হবে।এই ১৬ টি রং এর বাহিরে কোন রং এর নাম দিলে ওয়েব সাইট তা দেখাতে পারবে না।এই ১৬ টি রং হচ্ছে black,gray,silver,white,navy,blue,teal,aqua,green,lime,olive,yellow,maroon,red,purple,fuchsia.



**তাহলে কি আমরা এই ১৬ টা রং এর বাহিরে কোন রং ব্যাবহার করতে পারব না?????অবশ্যই পারবেন।সেক্ষেত্রে আপনাদের নাম ব্যাবহার করা চলবে না।আপনাদের হেক্সাডেসিমাল কোড ব্যাবহার করতে হবে।

***এবার আসুন শিখি কিভাবে হেক্সাডেমিকাল কোড ব্যাবহার করবেন।একে  #rrggbb  আকারে প্রকাশ করা হয়।এখানে rr দিয়ে red red,  gg  দিয়ে green green, bb দিয়ে blue blue বুঝাচ্ছে। এখন ধরুন একটা কোড দেওয়া আছে #336633 . এই কোড দিয়ে এমন একটা রং বুঝাচ্ছে যেটাতে rr=33,gg=66,bb=33 ।মানে ওই রংটাতে  ৩৩% red,৩৩% green, ৩৩% blue রং মিশ্রিত অবস্থায় আছে।মনে হয় কিছুটা হলেও বুঝাতে পেরেছি।

***আরেক ধরনের কোড আছে।যেমনঃ #6633ff .এখানে rr=66,gg=33,bb=ff. প্রথম দুইটা দিয়ে বুঝাচ্ছে অই রং এ ৬৬% red, ৩৩% green color আছে।কিন্তু ff দিয়ে কি বুঝায়??? ff দিয়ে সবোর্চ্চ পরিমান বুঝায়।

***উপরের অংশটুকু যারা জটিল পদ্ধতিতে যেতে চান না তাদের জন্য।আর যারা আসল ঘটনাটা জানতে চান তারা এখানে খেয়াল করুন।

{{{এবার আসুন দেখি হেক্সাডেসিমাল ব্যাবহার করা হয়। একে  #RRGGBB  আকারে প্রকাশ করা হয়।rr দিয়ে red,gg দিয়ে green,bb দিয়ে blue বুঝায়।

এই red,green,bue এর সমষ্টি হচ্ছে rgb.এদের প্রত্যেকের মান 0 হতে ২৫৫ এর মধ্যে হবে।মানে এরা প্রত্যেকের মান এককভাবে ০ হতে ২৫৫ এর মধ্যে হবে।

***যদি কোন রং এর মান ২৫৫ আসে তাহলে তা সবোর্চ্চ পরিমান এ আছে আছে বুঝতে হবে।মানে ১২৫ এর বেশি যত বাড়তে থাকবে রংটি তত গাঢ় হবে।১২৫ এর কম হতে থাকলে রং তত হালকা হবে।

***আসুন একটা চার্ট দেখি।চার্ট তা সুত্রের মত কাজ করবে।

decimal          :  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

hexadecimal :  0 1 2 3 4 5 6 7 8 9  A   B   C   D   E    F

আসুন এবার আমরা একটা সুত্র শিখি  হেক্সাডেসিমাল কোড এর মান কত তা বের করার নিয়মঃ

সুত্র= (যদি কোডটা A,B,C আকারে থাকে তাহলে চার্ট এ তার মান যত তা/ যদি সংখ্যা থাকে যেমন 52 তাহলে তার প্রথম সংখ্যা যেমন এখানে 5  *{গুন}  16) + A,B,C এর মান/যদি সংখ্যা থাকে তাহলে শেষ সংখ্যাটুকু যেমন 2

***আসুন এবার একটা ডেসিমাল কোড দেখি। #CCFF98.আসুন দেখি আমরা এই কোড দিয়ে কি বুঝি। এখানে CC=RR(red),FF=GG(green),98=BB(blue) বুঝাচ্ছে।

এখানে CC= (12*16)+12=204,

FF=(15*16)+15=255,

98=(9*16)+8=152.}}}

***আসুন হেক্সাডেসিমাল কোড এর চার্টটি দেখে নেই।এটি আপনারা যত্ন করে রেখে দিবেন,কারন এটা আপনাদের সবসময় কাঝে লাগবে।আর হেক্সাডেসিমাল কোড এর শুরুতে কিন্তু অবশ্যই হ্যাশ (#) দিতে হবে।






Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১০]
heading এর align attribute:

দেখেছি  <h1 হতে h6>………………….</h1 হতে h6> এটা হল heading এর ট্যাগ

ধরুন আপনি heading দিতে পারেন।কিন্তু কোন প্রয়োজনে বা সুন্দরের জন্য আপনাকে heading ডানে বামে নিতে হবে।তখন কি করবেন?? তখন আপনাদের heading ট্যাগ এর সাথে align attribute ব্যাবহার করতে হবে।আপনাকে ডানে,মাঝখানে,বামে heading নেওয়ার জন্য heading ট্যাগ এর সাথে right,center,left ব্যাবহার করতে হবে।

***আসুন এবার format টা দেখি।<h1 হতে h6 align=left বা center বা right>……………………</h1 হতে h6>

আসুন চিন্তা করি আমাদের এমন একটা কোডিং করতে হবে যার heading হবে সবচেয়ে বড়, এবং heading টি হবে ডানে।তখন আমাদের যে কোডিং টি ব্যাবহার করতে হবে তার format হবে <h1 align=right>………………………</h1>

***এবার আসুন একটি উদাহরন দেখি।

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   
<html>
 
<head>
 
<title>
 
টেকটিউনস বাংলার এক নাম্বার টেকনোলোজি সাইট।
 
</title>
 
</head>
 
<body>
 
<h1 align=left>আমরা সবাই  ভালবাসি</h1>
 
<h1 align=center> আমরা সবাই  ভালবাসি </h1>
 
<h1 align=right> আমরা সবাই ভালবাসি</h1>
 
<h1 align=left> আমরা সবাই  ভালবাসি </h1>
 
<h1 align=center> আমরা সবাই  ভালবাসি </h1>
 
<h1 align=right> আমরা সবাই  ভালবাসি </h2>
 
</body>
 
</html>

*এবার এটি নোটপ্যাড এ লিখে hfe.html নামে সেভ করুন।তারপর double click করে ওপেন করুন।

Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১১]
bgcolor (ব্যাকগ্রউন্ড কালার) ট্যাগঃ

আপনি নেট এ কোন ওয়েব সাইট এ গেলে যে পেজ ওপেন হয় সে পেজ এর যে কালার থাকে সেটাই ব্যাকগ্রাউন্ড কালার।ব্যাকগ্রাউন্ড কালার এর উপর একটি ওয়েব সাইট এর সুন্দরতা নির্ভর করে।

***bgcolor এর ট্যাগ এর গঠন হচ্ছেঃ

<body bgcolor =যেকোন কালার এর নাম বা কালার এর কোড>.....................</body>

***এখানে আপনি যে কালার এর নাম দিবেন ওয়েব পেজ এর ব্যাকগ্রাউন্ড কালার হিসেবে সেই কালার দেখাবে।

কালার এর কোড নিচের ইমেজ থেকে দেখে নিন।



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
   
<html>
 
<head>
 
<title>
 
লেখাপড়া করি।
 
</title>
 
</head>
 
<body bgcolor=grey>
 
<h1>আমাদের শিক্ষাব্যাবস্থা</h1>
 
আমাদের বাবা-মা এর একটা ধারনা হল যেভাবে হোক যেভাবেই হোক ছেলে-মেয়েকে মেডিকেল,ইঞ্জিনিয়ারিং পড়াতে হবে।

 
একজনের বাবা-মা সিদ্ধান্ত নেয় ছেলেকে ডাক্তারি পড়াবে,তার যদি ইঞ্জিনিয়ারিং পড়তে ইচ্ছে হয় কোন লাভ নেই।

 
আমাদের বাবা-মা দের উচিত ছেলে মেয়ে কোথায় পড়তে চায় তা জানা।

 
আর আমাদের শিউর হতে হবে যে আমি এই শাখায় গেলে ভাল করতে পারব।

 
তারপর লক্ষ্য ঠিক করে ঝাপিয়ে পড়তে হবে।

 
তাহলে সফলতা আসবেই।

 
আর আমাদের উচিত আমাদের লক্ষ্যের কথা আমাদের বাবা-মাদের সুন্দর করে বুঝাতে হবে,নাহলে আমাদের কথায় তারা রাগ করতে পারে।

 
</body>
 
</html>

***তারপর আপনি afr.html নামে সেভ করে double click করে ওপেন করুন।



**blockquote ট্যাগঃ

আসুন আমরা আরেকটা ট্যাগ এর ব্যাবহার শিখি।

ধরুন আপনি একটি লেখা লিখছেন।যেমন গ্রীষ্মকাল বিষয়ে।এখানে আপনি হঠাথ করে একটি উদ্ধিতি দিতে চাইলেন।মানে ধরুন রবীন্দ্রনাথ ঠাকুরের কবিতার “পার হয়ে যায় গরু পার হয় গাড়ী.....................” এই লাইনটি দিতে চান উদ্ধিতি আকারে,তখন এই ট্যাগ ব্যাবহার করতে হয়।

ট্যাগটির গঠন হলঃ 
………………………………………………….


***আসুন একটা উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
গ্রীষ্মকাল
 
</title>
 
</head>
 
<body>
 
গ্রীষ্মকাল এ খালি গরম আর গরম।আমরা সবাই গ্রীষ্মকাল কে বড়ই অপছন্দ করি।কিন্তু আমার খুব ভাল লাগে।অনেকের বর্ষাকাল খুব পছন্দ।আমারো পছন্দ।তবে গ্রীষ্মকাল বেশি পছন্দ।সবচেয়ে বড় কথা এই বর্ষাকাল না থাকলে আমরা আম,কাঠাল,লিচু এসব খেতে পারতাম না।আর কৃষ্ণচূড়া ফুল কিন্তু এই গ্রীষ্মকাল এ ফুটে।আর সবার মত আমারো আমিও মানি বর্ষাকাল সেরা,কিন্তু আমার গ্রীষ্মকাল বেশি ভাল লাগে।

 
আমাদের রবীন্দ্রনাথ ঠাকুর তার এক কবিতায় লিখেছিলেন
 

 
পার হয়ে যায় গরু,পার হয় গাড়ি।দুইধার উঁচু তার ঢালু তার পাড়ি।চিকচিক করে বালি,কোথাও নেই কাদা...
 

 
</body>
 
</html>

***তারপর তা সেভ করে ওপেন করুন।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১২]
Pre ট্যাগঃ
কিন্তু এমন এক ট্যাগ আছে যেটা ব্যাবহার করলে আগের ট্যাগগুলো ব্যাবহার করা লাগে না।মানে এই ট্যাগ ব্যাবহার করলে আপনি পরের লাইন এ যাওয়ার জন্য কোন ট্যাগ ব্যাবহার করা লাগবে না,যেখানে যেরকম ফাকা স্পেস রাখবেন সেইরকম ফাকা স্পেস থাকবে।

***আসুন আমরা এই ট্যাগ এর সাথে পরিচিত হই।এই ট্যাগ এর গঠন হল 
............................


***এবার আসুন একটি উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   
<h1>best movie list</h1>

action movie                kids movie                   animated movie
 
forbidden kingdom           big fat liar                 mulan
 
cellular                    eragon                       megamind
 
Indianajones                hanna                        tinker bell
 
Fast and furious            home alone                   rio
 
Fan on fire                 harry potter                 rango
 
Resident evil               ink heart                    wall-e


এবার এটিকে নোটপ্যাড এ লিখে ete.html {যেকোন নাম.html}নামে সেভ করে double click করে ওপেন করুন।



Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১৩]
ধরুন আপনি একটা web site এ গেলেন।সেখানে প্রথম যে পেজটা ওপেন হবে সেটা হোম পেজ।সেখান থেকে আমরা অন্যান্য পেজ এ যাই।দেখবেন হোম পেজ এ নানা যায়গায় লেখা থাকে এই জিনিষটা ডাউনলোড করতে হলে এখানে ক্লিক করুন।অমুক পেজ এ যেতে হলে এখানে ক্লিক করুন।আমরা এতোদিন শুধু এসব জিনিষ শুধু দেখেই এসেছি।আজকে আমরা শিখব কিভাবে এসব লিঙ্ক তৈরি করা হয়

প্রথমে নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন।তারপর তা a1.html নামে সেভ করুন।(একটা কথা নামটা কিন্তু খেয়াল রাখবেন মানে যে নাম এ সেভ করেছেন,কারন ওই নামটা আমাদের হোম পেজ এ কাজে লাগবে। )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   
<html>
 
<head>
 
<title>
 
We love techtunes
 
</title>
 
</head>
 
<body>
 
<h1>DIU কেন সবার সেরা</h1>
 
আমরা সবাই DIU k ভালবাসি।এ

 
যেকোন কিছু নিজের ভাষায় শিখার মজাই আলাদা

 
এখানে সবাই আসে নিজে কিছু শিখতে,অন্যকে কিছু শিখাতে
 
</body>
 
</html>

আবার, নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন।তারপর তা a2.html নামে সেভ করুন।(একটা কথা নামটা কিন্তু খেয়াল রাখবেন মানে যে নাম এ সেভ করেছেন,কারন ওই নামটা আমাদের হোম পেজ এ কাজে লাগবে।

<html>
 
<head>
 
<title>
 
We love DIU
 
</title>
 
</head>
 
<body>
 
<h1>DIU কেন সবার সেরা</h1>
 
আমরা এখানে কম্পিউটার এর নিত্যনতুন সফটওয়্যার এর বিষয়ে ধারনা পাই

 
এখানে কম্পিউটার এবং টেকনোলজি এর নানা বিষয় জানতে পারি

 
 
</body>
 
</html>

পুনরায় আবার, নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন।তারপর তা a3.html নামে সেভ করুন।(একটা কথা নামটা কিন্তু খেয়াল রাখবেন মানে যে নাম এ সেভ করেছেন,কারন ওই নামটা আমাদের হোম পেজ এ কাজে লাগবে।)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
We love techtunes
 
</title>
 
</head>
 
<body>
 
<h1>DIUকেন সবার সেরা</h1>
 
এছাড়া এখানে কেউ কোন সমস্যায় পড়লে সাহায্য বিভাগের মাধ্যমে অন্যের কাছ থেকে বিষয়টা জানতে পারে

 
এই সাইট এর graphics design এবং web design বিভাগটি বেশ উন্নত


</body>
 
</html>
**এবার আসুন আসল কথায় আসি।আপনারা দেখবেন কোন ওয়েব সাইট এর হোম পেজ এ বিভিন্ন টেক্সট বা ছবির উপরে ক্লিক করলে তা আমাদের বিভিন্ন পেজ এ নিয়ে যায়।
***কোন টেক্সট বা ইমেজ এর মধ্যে এই লিঙ্ক ঢুকিয়ে দেওয়ার জন্য যে ট্যাগ ব্যাবহার করা হয় তা এখন আমরা আলোচোনা করব।ট্যাগ এর গঠনটি এরকমঃ

<a href=লিঙ্ক বা url>text[/url]

 

***ট্যাগ এর গঠনটা একটু কঠিন লাগছে।এখনই সহজ করে দিচ্ছি।প্রথমে আসি লিঙ্ক বা,url দিয়ে কি বুঝাচ্ছে।

A href দিয়ে কি বুঝায়?a দিয়ে anchor ট্যাগ বুঝায়।আর এই ট্যাগ এর সাথে যে attribute টি ব্যাবহার করা হয় তা হল href.href দিয়ে কি বুঝায়?href দিয়ে hyper reference বুঝায়।এই ট্যাগ দিয়ে text এর path বলে দেওয়া হয়,মানে কোথায় যেতে হবে সেই পথ নির্দেশনা বলে দেওয়া হয়। আসুন আসল উদাহরন এর আগে ছোট একটা উদাহরন দেখি।

<a href=www.daffodilversity.com>BEST BEST BEST[/url]

 এখানে www.daffodilversity.com দিয়ে আমরা যে সাইট এ যেতে চাই তা বুঝাচ্ছে।আর,  BEST BEST BEST এটা হল text.এখন আপনি যদি এই এই কোডিংটা এখন আপনার পোস্ট বা কমেন্ট এ লিখে পাবলিশ করেন তাহলে শুধুমাত্র “BEST BEST BEST” এই লাইনটুকু দেখাবে।এই লাইন এ ক্লিক করলে ব্রাউজার আপনাকেwww.daffodilversity.com এ নিয়ে যাবে।আশা করি বুঝতে পেরেছেন।


***এবার আসুন বাস্তব উদাহরন এ আসি।আমরা এবার নিজেরাই একটা হোম পেজ বানাব।যেখানে আমাদের উপরে বানানো তিনটি পেজ এর লিঙ্ক দেওয়া থাকবে।আসুন নিচের মত কোডিং করি,তারপর তা a4.html নামে সেভ করব।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   
<html>
 
<head>
 
<title>
 
homepage
 
</title>
 
</head>
 
<body>
 
<h1>এটা হল আমাদের হোম পেজ</h1>
 
এখান থেকে আমরা নানা পেজ এ যাব।

 
<a href=a1.html>পেজ ১ এ যেতে হলে এখানে ক্লিক করুন[/url]

 
<a href=a2.html>পেজ ২ এ যেতে হলে এখানে ক্লিক করুন[/url]

 
<a href=a3.html>পেজ ৩ এ যেতে হলে এখানে ক্লিক করুন[/url]

 
</body>
 
</html>

 

***প্রথমেই আপনাদের বলে রাখি আমরা এটা সহ মোট চারটা পেজ বানিয়েছি।এই পেজগুলো আপনারা একটা folder এ রাখবেন।এখন আপনাদের মনে প্রশ্ন আসতে পারে এই চারটা পেজ একই folder এ রাখতে হবে কেন?আপনি আমি বিভিন্ন ওয়েব সাইট এ যাই।যেমন ধরুন www.daffodilversity.com  এই ঠিকানায় শত শত পেজ।এই পেজগুলো কিন্তু একটা server এ একটা ফোল্ডার এ রাখা আছে।

 

***এবার আসুন দেখি কিভাবে লাস্ট কোডিংটুকু করা হল।আপনি প্রথম কোডিংটুকু a1.html নামে সেভ করেছেন।এখানে a href=a1.html  দিয়ে আমরা ব্রাউজারকে হুকুম দিচ্ছি,তুমি আমাকে এই পেজ এ নিয়ে যাও।

“পেজ ১ এ যেতে হলে এখানে ক্লিক করুন” এই লাইনটুকু ওয়েব সাইট এ প্রদর্শন করবে।একইভাবে বাকি লাইনটুকু লিখে ফেলি।

 

***এই চারটি পেজ একই folder এ রাখি।তারপর a4.html নামক ফাইলটি ওপেন করি।এটাই আমাদের হোম পেজ।এখান থেকে আমরা অন্যান্য পেজ এ যাব।a4.html নামক ফাইলটি double click করে ওপেন করি।

Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১৪]
আজকে আমরা শিখব কিভাবে image এর মাধ্যমে লিঙ্ক ব্যাবহার করা যায়।সাথেই থাকুন।

***প্রথমে নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন।তারপর তা a1.html নামে সেভ করুন।এবার এই ফাইলটি একটি folder এ রাখি।

<html>
<head>
<title>
We love DIU
</title>
</head>
<body>
<h1>DIUকেন সবার সেরা</h1>
এছাড়া এখানে কেউ কোন সমস্যায় পড়লে সাহায্য বিভাগের মাধ্যমে অন্যের কাছ থেকে বিষয়টা জানতে পারে

এই সাইট এর graphics design এবং web design বিভাগটি বেশ উন্নত

</body>
</html>

***এবার,আমরা যেই image টাকে লিঙ্ক হিসেবে ব্যাবহার করব সেই ইমেজটাকেও ওই folder এ রাখুন।আমি folder এ যেই ইমেজ ব্যাবহার করেছি তার নাম varsity  । এবার আসুন দেখি বাকি কোডিংটুকু কিভাবে করব তা দেখি।

***আসুন নিচের মত কোডিং করি, তারপর তা a2.html নামে সেভ করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
   
<html>
<head>
<title>
Image লিঙ্ক এর উদাহরণ
</title>
</head>
<body>
<h1> DIU SOBAR SARE

জানতে চাইলে নিচের image এ ক্লিক করুন।
<a href =a1.html ><img src = varsity.jpg   height=350  width=400>[/url]
</body>
</html>

***এখানে, a  href দিয়ে কি বুঝায়?a দিয়ে anchor ট্যাগ বুঝায়।আর এই ট্যাগ এর সাথে যে attribute টি ব্যাবহার করা হয় তা হল href. href দিয়ে কি বুঝায়? href দিয়ে hyper reference বুঝায়।এই ট্যাগ দিয়ে text বা, image এর path বলে দেওয়া হয়।
***ধরুন আপনি লিঙ্ক এ একটি image দিতে চাচ্ছেন,এই image এর নাম হচ্ছে beauty.তাহলে আপনার কোডিংটুকু হবে এইরকম
<a href =a1.html ><img src =beauty.jpg   height=350  width=400>[/url]

আমি যে image টা ব্যাবহার করেছি তার নাম varsity তাই আমি আমার কোডিং এ varsity শব্দটা use করেছি।

***এবার আসুন পরের বিষয়ে।আরেকটা বিষয় খেয়াল করেছেন।ছবির নামের পাশে .jpg ব্যাবহার করেছি।এর একটা কারন আছে।আপনার image টি যেই ফরম্যাট এর আপনি ইমেজ এর নামের শেষে সেই ফরম্যাট লিখবেন।ধরুন আপনার ইমেজ এর ফরম্যাট হচ্ছে png ফরম্যাট এর।তাহলে আপনি লিখবেন  beauty.png(আপনার ইমেজ এর নাম  .png)l

***আর, height , width  দিয়ে উচ্চতা,চওড়া বুঝায়।আপনি আপনার ইমেজ এর সাইজ কতটুকু দিবেন তা এটা দিয়ে উল্লেখ করা হয়।

***এবার, লাস্ট এর কোডিংটুকু সেভ করে তা ওই ফোল্ডার এ রাখুন। সবকিছু কিন্তু একই ফোল্ডার এ থাকতে হবে,তা না হলে কিন্তু কাজ করবে না।

*** এবার, a2.html নামের পেজটাকে double click করে ওপেন করুন।দেখবেন,নিচের মত পেজ আসবে।তারপর ইমেজটাতে ক্লিক করুন।


Offline Sultan Mahmud Sujon

  • Administrator
  • Hero Member
  • *****
  • Posts: 2667
  • Sultan Mahmud Sujon, Sr. Admin Officer
    • View Profile
    • Helping You Office Operation & Automation Management
আসুন শিখি HTML [পর্ব-১৫]
*আসুন প্রথমে দেখে নেই কিভাবে সাউন্ড অ্যাড করা যায়।

***প্রথমে কোডিংটুকু দেখে নেই।তারপর ব্যাখ্যায় আসছি।

***notepad ওপেন করুন।তারপর,এই কোডিংটুকু লিখুন।তারপর তা aa.html নামে সেভ করুন।

<html>

<head>

<title>

Html এর মাধ্যমে যেভাবে sound অ্যাড করা যায়

</title>

</head>

<body>

<h1> এটা হল সাউন্ড অ্যাড করার একটি উদাহরণ </h1>

<a href="brishti.mp3">সাউন্ডটি শুনতে এখানে ক্লিক করুন [/url]
  </body>

</html>

***তারপর,আপনি উপরের ফাইল টি একটি ফোল্ডার এ রাখুন।আর,আপনি যেই সাউন্ড/মিউজিকটি শুনাতে চান সেটি একই ফোল্ডার এ রাখুন।


***এখানে, a  href দিয়ে কি বুঝাচ্ছে আসুন দেখি। a দিয়ে anchor ট্যাগ বুঝায়।এর সাথে যে attribute টি ব্যাবহার করা হয় তা হল href.  Href attribute  দিয়ে কি বুঝায়? href দিয়ে hyper reference বুঝায়।এই ট্যাগ দিয়ে text বা, image,song,video  এর path বলে দেওয়া হয়।

***ধরুন আপনি লিঙ্ক এ একটি music/sound  দিতে চাচ্ছেন,এই sound এর নাম হচ্ছে meghla. আর এর format হচ্ছে mp3 ফরম্যাট। তাহলে আপনার কোডিংটুকু হবে এইরকম
<a href="meghla.mp3">আপনি ওয়েব সাইট এ যেই লাইন টি দেখাতে চান সেটি এখানে লিখবেন [/url]

***এখানে আমি ফোল্ডার এ যেই মিউজিক বা, সাউন্ড রেখেছি তার নাম হচ্ছে brishti,আর এটির ফরম্যাট ছিল mp3 ।

***এবার,আপনি folder এ ঢুকে যেই ফাইলটি সেভ করেছিলেন।সেটা double click কর এ ওপেন করুন।দেখবেন নিচের মত পেজ ওপেন হবে।



*এবার আসুন আরেকটা  বিষয় নিয়ে আলোচোনা করি। কিভাবে আপনি আপনার সাইট এ youtube video অ্যাড করবেন। উপরের লেখাটি বুঝলে এটা বুঝা পানির মত সোজা।

***একটু খেয়াল করে দেখেন একটি জায়গায় অল্পেকটু change আছে।আর বাকি সব জায়গায় same.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   
<html>
 
<head>
 
<title>
 
Html এর মাধ্যমে যেভাবে youtube video অ্যাড করা যায়
 
</title>
 
</head>
 
<body>
 
<h1> এটা হল youtube video  অ্যাড করার একটি উদাহরণ </h1>
 
<a href="
">colaveri di এর video song টা শুনতে এখানে ক্লিক করুন [/url]
 
</body>
 
</html>

***পুরো কোডিং এ যেই জায়গায় change আছে সেই জায়গা হচ্ছে <a href="…………………………>

এখানে শুধু ............... জায়গায় আপনার youtube এর ভিডিও এর url/link টি দিয়ে দিন।কেল্লা ফতে। আর বাকি সব কিছুই same.

***এবার এটিকে abc.html নামে সেভ করুন।এবার সেভ করা ফাইলটিকে double click করে ওপেন করুন।দেখবেন,নিছের মত পেজ আসবে।