IT Help Desk > Create your Own Website
HTML শিখুন নিজের ওয়েবপেজে ব্যাবহার করুন Patr 1 to 15
Sultan Mahmud Sujon:
আসুন শিখি 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 ট্যাগঃ
আসুন আমরা আরেকটা ট্যাগ এর ব্যাবহার শিখি।
ধরুন আপনি একটি লেখা লিখছেন।যেমন গ্রীষ্মকাল বিষয়ে।এখানে আপনি হঠাথ করে একটি উদ্ধিতি দিতে চাইলেন।মানে ধরুন রবীন্দ্রনাথ ঠাকুরের কবিতার “পার হয়ে যায় গরু পার হয় গাড়ী.....................†এই লাইনটি দিতে চান উদ্ধিতি আকারে,তখন এই ট্যাগ ব্যাবহার করতে হয়।
ট্যাগটির গঠন হলঃ
………………………………………………….
--- End quote ---
***আসুন একটা উদাহরন দেখি।
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>
গ্রীষ্মকাল এ খালি গরম আর গরম।আমরা সবাই গ্রীষ্মকাল কে বড়ই অপছন্দ করি।কিন্তু আমার খুব ভাল লাগে।অনেকের বর্ষাকাল খুব পছন্দ।আমারো পছন্দ।তবে গ্রীষ্মকাল বেশি পছন্দ।সবচেয়ে বড় কথা এই বর্ষাকাল না থাকলে আমরা আম,কাঠাল,লিচু এসব খেতে পারতাম না।আর কৃষ্ণচূড়া ফুল কিন্তু এই গ্রীষ্মকাল এ ফুটে।আর সবার মত আমারো আমিও মানি বর্ষাকাল সেরা,কিন্তু আমার গ্রীষ্মকাল বেশি ভাল লাগে।
আমাদের রবীন্দ্রনাথ ঠাকুর তার এক কবিতায় লিখেছিলেন
পার হয়ে যায় গরু,পার হয় গাড়ি।দুইধার উঁচু তার ঢালু তার পাড়ি।চিকচিক করে বালি,কোথাও নেই কাদা...
--- End quote ---
</body>
</html>
***তারপর তা সেভ করে ওপেন করুন।
Sultan Mahmud Sujon:
আসুন শিখি 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 করে ওপেন করুন।
Sultan Mahmud Sujon:
আসুন শিখি 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 করে ওপেন করি।
Sultan Mahmud Sujon:
আসুন শিখি 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 করে ওপেন করুন।দেখবেন,নিচের মত পেজ আসবে।তারপর ইমেজটাতে ক্লিক করুন।
Sultan Mahmud Sujon:
আসুন শিখি 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 করে ওপেন করুন।দেখবেন,নিছের মত পেজ আসবে।
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version