কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন।আজকে আমি আপনাদের সাথে একটা নতুন বিষয় নিয়ে আলোচোনা করব।ধরুন আপনি একটা 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>টেকটিউনস কেন সবার সেরা</h1> আমরা সবাই টেকটিউনসকে ভালবাসি।এখানে আমরা সবাই কম্পিউটার জগতের সবকিছু আমাদের প্রানের ভাষা বাংলায় জানতে পারি।<br> যেকোন কিছু নিজের ভাষায় শিখার মজাই আলাদা<br> এখানে সবাই আসে নিজে কিছু শিখতে,অন্যকে কিছু শিখাতে </body> </html> |
***আবার, নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন।তারপর তা a2.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>টেকটিউনস কেন সবার সেরা</h1> আমরা এখানে কম্পিউটার এর নিত্যনতুন সফটওয়্যার এর বিষয়ে ধারনা পাই<br> এখানে কম্পিউটার এবং টেকনোলজি এর নানা বিষয় জানতে পারি<br> এখানে আমরা টিউটোরিয়াল থেকে যেকোন বিষয় পূর্ণ ধারনা পেতে পারি।<br> </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>টেকটিউনস কেন সবার সেরা</h1> এছাড়া এখানে কেউ কোন সমস্যায় পড়লে সাহায্য বিভাগের মাধ্যমে অন্যের কাছ থেকে বিষয়টা জানতে পারে<br> এই সাইট এর টিপস অ্যান্ড tricks বিভাগটিও বেশ পরিপূর্ণ<br> এই সাইট এর graphics design এবং web design বিভাগটি বেশ উন্নত<br> আমাদের এখন শুধু একটাই দায়িত্ব আমাদের এই সাইটটিকে আরো পরিপূর্ণ করা </body> </html> |
***এবার আসুন আসল কথায় আসি।আপনারা দেখবেন কোন ওয়েব সাইট এর হোম পেজ এ বিভিন্ন টেক্সট বা ছবির উপরে ক্লিক করলে তা আমাদের বিভিন্ন পেজ এ নিয়ে যায়।যেমন আমরা techtunes এ বিভিন্ন সফটওয়্যার এর নিচে ডাউনলোড করার জন্য বিভিন্ন ইমেজ দেওয়া থাকে।অখানে ক্লিক করলে আমাদের সফটওয়্যারটি ডাউনলোড শুরু হয়ে যাবে।ওই ইমেজ বা টেক্সট এর মধ্যে কিভাবে লিঙ্ক অ্যাড করে দেওয়া হয় তা আমরা আজকে জানব।এখন দেখব কিভাবে তা করা যায়।
***কোন টেক্সট বা ইমেজ এর মধ্যে এই লিঙ্ক ঢুকিয়ে দেওয়ার জন্য যে ট্যাগ ব্যাবহার করা হয় তা এখন আমরা আলোচোনা করব।ট্যাগ এর গঠনটি এরকমঃ
<a href=লিঙ্ক বা url>text</a>
***ট্যাগ এর গঠনটা একটু কঠিন লাগছে।এখনই সহজ করে দিচ্ছি।প্রথমে আসি লিঙ্ক বা,url দিয়ে কি বুঝাচ্ছে।ধরুন আপনি টেকটিউনস এ কমেন্ট করছেন।ধরুন আপনি কমেন্ট করলেন এই বিষয়টি আপনি আরো ভাল জানতে হলে tunerpage.com এ যান।এখানে আপনি যে ওয়েব এড্রেস এর ঠিকানা দিচ্ছেন তাই হচ্ছে লিঙ্ক বা url.
এবার আসুন text দিয়ে কি বুঝাচ্ছে? ধরুন আপনি কমেন্ট এ যে লিঙ্ক টা দিচ্ছেন তা যদি সরাসরি দেন তাহলে খারাপ দেখা যায়।কিন্তু আপনি যদি কমেন্ট এ লেখেন “এখানে ক্লিক করুন”।এই লেখায় ক্লিক করলে সরাসরি আপনার লিঙ্ক বা url এ নিয়ে যাবে।মানে আপনি ওয়েব সাইট এ যে লেখাটি show করতে চান,যার মধ্যে লিঙ্কটি থাকবে তা এই text এর জায়গায় লিখবেন।
A href দিয়ে কি বুঝায়?a দিয়ে anchor ট্যাগ বুঝায়।আর এই ট্যাগ এর সাথে যে attribute টি ব্যাবহার করা হয় তা হল href.href দিয়ে কি বুঝায়?href দিয়ে hyper reference বুঝায়।এই ট্যাগ দিয়ে text এর path বলে দেওয়া হয়,মানে কোথায় যেতে হবে সেই পথ নির্দেশনা বলে দেওয়া হয়। আসুন আসল উদাহরন এর আগে ছোট একটা উদাহরন দেখি।
<a href=techtunes.com.bd>বাংলার সেরা টেকনোলজি সাইট</a>
এখানে techtunes.com.bd দিয়ে আমরা যে সাইট এ যেতে চাই তা বুঝাচ্ছে।আর, বাংলার সেরা টেকনোলজি সাইট এটা হল text.এখন আপনি যদি এই এই কোডিংটা এখন আপনার পোস্ট বা কমেন্ট এ লিখে পাবলিশ করেন তাহলে শুধুমাত্র “বাংলার সেরা টেকনোলজি সাইট” এই লাইনটুকু দেখাবে।এই লাইন এ ক্লিক করলে ব্রাউজার আপনাকে techtunes এ নিয়ে যাবে।আশা করি বুঝতে পেরেছেন।
***এবার আসুন বাস্তব উদাহরন এ আসি।আমরা এবার নিজেরাই একটা হোম পেজ বানাব।যেখানে আমাদের উপরে বানানো তিনটি পেজ এর লিঙ্ক দেওয়া থাকবে।আসুন নিচের মত কোডিং করি,তারপর তা 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> এখান থেকে আমরা নানা পেজ এ যাব।<br> <a href=a1.html>পেজ ১ এ যেতে হলে এখানে ক্লিক করুন</a><br> <a href=a2.html>পেজ ২ এ যেতে হলে এখানে ক্লিক করুন</a><br> <a href=a3.html>পেজ ৩ এ যেতে হলে এখানে ক্লিক করুন</a><br> </body> </html> |
***প্রথমেই আপনাদের বলে রাখি আমরা এটা সহ মোট চারটা পেজ বানিয়েছি।এই পেজগুলো আপনারা একটা folder এ রাখবেন।এখন আপনাদের মনে প্রশ্ন আসতে পারে এই চারটা পেজ একই folder এ রাখতে হবে কেন?আপনি আমি বিভিন্ন ওয়েব সাইট এ যাই।যেমন ধরুন techtunes.com.bd. এই ঠিকানায় শত শত পেজ।এই পেজগুলো কিন্তু একটা server এ একটা ফোল্ডার এ রাখা আছে।
***এবার আসুন দেখি কিভাবে লাস্ট কোডিংটুকু করা হল।আপনি প্রথম কোডিংটুকু a1.html নামে সেভ করেছেন।এখানে a href=a1.html দিয়ে আমরা ব্রাউজারকে হুকুম দিচ্ছি,তুমি আমাকে এই পেজ এ নিয়ে যাও।
“পেজ ১ এ যেতে হলে এখানে ক্লিক করুন” এই লাইনটুকু ওয়েব সাইট এ প্রদর্শন করবে।একইভাবে বাকি লাইনটুকু লিখে ফেলি।
***এই চারটি পেজ একই folder এ রাখি।তারপর a4.html নামক ফাইলটি ওপেন করি।এটাই আমাদের হোম পেজ।এখান থেকে আমরা অন্যান্য পেজ এ যাব।a4.html নামক ফাইলটি double click করে ওপেন করি।
***এবার, “পেজ ১ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার প্রথম বানানো পেজ এ নিয়ে যাবে।
***তারপর, “পেজ ২ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার ২য় বানানো পেজ এ নিয়ে যাবে।
***“পেজ ৩ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার ৩য় বানানো পেজ নিয়ে যাবে।
লেখকঃ সাবিহা
সুত্রঃ টেকটিউনস
No comments:
Post a Comment