আসুন শিখি HTML [পর্ব-১৩]

কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন।আজকে আমি আপনাদের সাথে একটা নতুন বিষয় নিয়ে আলোচোনা করব।

 

***ধরুন আপনি একটা web site এ গেলেন।সেখানে প্রথম যে পেজটা ওপেন হবে সেটা হোম পেজ।সেখান থেকে আমরা অন্যান্য পেজ এ যাই।দেখবেন হোম পেজ এ নানা যায়গায় লেখা থাকে এই জিনিষটা ডাউনলোড করতে হলে এখানে ক্লিক করুন।অমুক পেজ এ যেতে হলে এখানে ক্লিক করুন।আমরা এতোদিন শুধু এসব জিনিষ শুধু দেখেই এসেছি।আজকে আমরা শিখব কিভাবে এসব লিঙ্ক তৈরি করা হয়।আপনারা শুধু আমার সাথে টিউন এর শেষ পর্যন্ত যান।দেখবেন এসব আপনার কাছে পান্তা ভাত।

 

***আজকের টিউটোরিয়ালটা একটু বড়।আপনারা একটু মনোযোগ দিয়ে দেখুন আপনাদের কাছে জিনিষটা সহজ হয়ে যাবে।আমরা প্রথমে আগের টিউনগুলো এর নিয়ম অনুসারে তিনটি ওয়েব পেজ তৈরি করব।তারপর আমরা আরেকটা পেজ বানাবো যেটা হবে আমাদের হোম পেজ যেখানে আগের বানানো পেজগুলোর লিঙ্ক দেওয়া থাকবে।আমরা অই লিঙ্ক গুলোতে ক্লিক করলে ব্রাউজার আমাদের অই পেজগুলোতে নিয়ে যাবে।আসুন শুরু করে দেই।

 

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


<html>

<head>

<title>

We love techtunes

</title>

</head>

<body>

<h1>টেকটিউনস কেন সবার সেরা</h1>

আমরা সবাই টেকটিউনসকে ভালবাসি।এখানে আমরা সবাই কম্পিউটার জগতের সবকিছু আমাদের প্রানের ভাষা বাংলায় জানতে পারি।<br>

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

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

</body>

</html>

 

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


<html>

<head>

<title>

We love techtunes

</title>

</head>

<body>

<h1>টেকটিউনস কেন সবার সেরা</h1>

আমরা এখানে কম্পিউটার এর নিত্যনতুন সফটওয়্যার এর বিষয়ে ধারনা পাই<br>

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

এখানে আমরা টিউটোরিয়াল থেকে যেকোন বিষয় পূর্ণ ধারনা পেতে পারি।<br>

</body>

</html>

 

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

 


<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.io>বাংলার সেরা টেকনোলজি সাইট</a>

 

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

 

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


<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.io. এই ঠিকানায় শত শত পেজ।এই পেজগুলো কিন্তু একটা server এ একটা ফোল্ডার এ রাখা আছে।

 

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

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

 

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

 

***এবার, “পেজ ১ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার প্রথম বানানো পেজ এ নিয়ে যাবে।

 

 

***তারপর, “পেজ ২ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার ২য় বানানো পেজ এ নিয়ে যাবে।

 

***“পেজ ৩ এ যেতে হলে এখানে ক্লিক করুন” এই লেখায় ক্লিক করুন।দেখবেন,আপনার ৩য় বানানো পেজ নিয়ে যাবে।

 

আশা করি আপনারা বুঝতে পেরেছেন।আজকের টিউন করতে বেশ কষ্ট হয়েছে।আপনাদের কমেন্ট এর আশায় বসে রইলাম।সময় হলে একটু কমেন্ট করবেন।সবাই ভাল থাকবেন।

Level 0

আমি সাবিহা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 98 টি টিউন ও 753 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

খুব সাধারন একটি মানুষ।সারাদিন কম্পিউটার নিয়ে পড়ে থাকি।মুভি দেখি,ব্লগ এ ব্লগ এ ঘুরাঘুরি করি।পড়ালেখা করতে বরাবরই ভয় লাগে। আর ফেসবুক এ একটা পেজ খুলেছি।যারা সময় পাবেন একটু ঢু মেরে আসবেন।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

উপকারে আসবে কিছু দিন পর কারণ আমি এখন শিক্ষা শুরু করব

    শুরু করে দেন।

      এখানে ফোল্ডারের বাইরে কোনো কিছু থাকলে বা এক্সটার্নাল লিংক থাকলে সম্পুর্ন লিংক ইউজ করতে হবে এবং লিংক নতুন ট্যাবে ওপেন করতে হলে target=”_blank” এগুলাও এড করা দরকার ছিল, যেহেতু এঙ্কোর নিয়ে লিখেছেন। অথবা অন্য কোনো পোস্টে এঙ্কোর ট্যাগ নিয়ে বিস্তারিত লিখেন।
      আপনি পোস্ট অনেক বড় করে ফেলেছেন কোনো কারন ছাড়া যেখানে একটা পেজ তৈরী করে লিংক দেখানো যথেষ্ট ছিল।
      HTML চেইন টিউন ভাল লাগছে, কিন্তু টিউনের টাইটেল দেখে বুঝা যাচ্ছে না আপনি কি নিয়ে লিখছেন। হয়ত এমন অনেক কিছু আছে যেগুলো আমি জানি না তাহলে এই ১৩ টা টিউন থেকে কিভাবে বের করব সবগুলা যদি না পড়ি। বিষয়টা বুঝতে পেরেছেন নিশ্চই। @সাবিহা

Level 0

Apni Ki Janen Apnar Computer ta Male na Female?
Jante Hole ghure asun http://www.d-uzzwal.blogspot.com

আজকের টিউন টা অন্নেক ভাল হইছে। পড়ছি এবং সাথে সাথে করছি। চালিয়ে যান গুরু ।

    গুরু-টুরু কইয়েন না।শুনতে কেমন জানি লাগে।:) 🙂 🙂

good

Level 0

Thanks.

Level 0

আপনার প্রোফাইল পিক এর পাশে লেখা “আমি মুভি টরেন্ট এর একটি নতুন ব্লগ খুলেছি।যারা সময় পাবেন তারা একটু ঢুঁ মারবেন আমার এই ব্লগ এ।ব্লগের লিঙ্ক “। তার মানে আপনি টরেন্ট ডাউনলোড সম্পর্কে ভাল ধারনা রাখেন ধরে নিচ্ছি। আমাকে একটা পরামর্শ দিন- কিভাবে বুঝব যে কোন টরেন্ট ফাইলটা ফেক আর কোনটা সত্যি। যেমনঃ দেখা যায় ৭০% টরেন্ট মুভি ডাউনলোড করলে ভিডিও ফাইল আনলক করার জন্য সার্ভে করতে বলে। যা কোন ভাবেই করা উচিত না।

    প্রথমে আপনাকে বলি আপনি যে মুভি ডাউনলোড করবেন তা http://www.kat.ph/ এই ঠিকানায় গিয়ে সার্চ করুন।ধরুন আপনি thor মুভিটা ডাউনলোড করতে চাচ্ছেন,তাহলে আপনি http://www.kat.ph/ গিয়ে সার্চ অপশন এ গিয়ে thor লিখে সার্চ দিন।ধরুন ৩০টি টরেন্ট এর লিঙ্ক আসল।তারপর প্রতিটি টরেন্ট এর নামের পাশে দেখবেন chat box এর মত sign.অখানে মাউস এর কার্সর নিলে দেখবেন অই টরেন্ট audio,video তে কত মারক পেয়েছে তা দেখাবে।যদি দেখেন কোন টরেন্ট এর audio আর video ১০ এ ৯,বা ১০ পেয়েছে।তাহলে বুঝবেন অই টরেন্ট এর মুভি হাই quality।আর যদি দেখেন ৮ পেয়েছে তাহলে বুঝবেন মোটামুটি ভাল।৮ এর নিচে খারাপ প্রিন্ট।

      Level 0

      @সাবিহা: ধন্যবাদ দুজনকেই পরামর্শ দেবার জন্য। আর সাবিহা, আপনার ব্লগে গিয়েছিলাম আজকে, কিছু ভাল মুভি ছিল। নাইট এন্ড ডে, ডার্ক অফ দা মুন; এই মুভি গুলোর ডাউনলোড লিংক থাকলে সেয়ার করবেন।

    @Babu: সোজা হিসাব – টরেন্টে কমেন্ট দেখেই বুঝবেন। যদি কমেন্টার চিল্লাফাল্লা করে তাইলে বুঝবেন যে ফেক। আর bitsnoop সবচেয়ে ভালো সাইট, এখানে টরেন্ট অথরিটি নিজেই ভেরিফাই করে এবং টরেন্টের পাশে ভেরিফায়েড লেখা থাকে।

      এটাই মূল কথা, একবার আমি ১.৫জিবি ফাইল নামানোর পর দেখি পুরো ফকফকা। মাথার মেজাজ এত খারাপ হয়ছিল যে কি আর বলব। 🙁 এরপর থেকে কমেন্ট না দেখে আর ডাউনলোডে দেয় না, আর এখন টিউনার(সাবিহা) ভাইয়ের টিপসটাও মাথায় থাকল। :p

আর আপনি যদি ঝামেলায় যেতে না চান তাহলে আপনি ফেসবুক এ সার্চ অপশন এ গিয়ে yify,অথবা stylishsalah,এই নামে সার্চ দিবে।অখানে দেখবেন অনেক মুভি এর লিঙ্ক।এরা দুইজন top class রিপার।আপনি চোখ বন্ধ করে ডাউনলোড করতে পারেন।এদের দুইজনের মত এতো ভাল রিপ আমি আর কাউকে করতে দেখিনি।তারা প্রতিদিন গড়ে ২-৩ টা করে মুভি এর লিঙ্ক দেয়।

হুম এই পর্বটা খুবই ভালো হয়েছে। চালিয়ে যান, সাথে আছি। 😀

১ নম্বর থেকে শুরু করলাম। আপনি আমাদের পরে কি ভাবে ওয়েব সাইডে এগুলো সাজাব শিক্ষাবেন।

লেখা ভালো হচ্ছে 🙂

লেখা ভাল লাগল, পরের পর্বের অপেক্ষায় আছি

good,very good পরের পর্বের অপেক্ষায় আছি

সাকিব ভাই আমারে একটু হেল্প করেন এক্সেল এর ব্যপারে। আমি csv ফরম্যাট এ সেভ করলে সেভ হয় কিন্তু সেটা ইমেইল ইম্পোর্ট করলে invalid format দেখায়। কি করব বলেন? খুব দরকার ফেসবুক এ আমি goo.gl/C9t9K আমাকে একটু অ্যাড করেন।

Level 0

apu i need your mobile nnmber.i want to talk to you. please give me your number by e-mail. my e-mail is [email protected]

Level 0

আপু ১৩তম লেসন তো শেষ হলো সেই ১০ই সেপ্টেম্বর। আপনি কোথায়? এখন কি আর লিখবেন না? আশা করেছিলাম এইচটিএমএল জাভার ব্যবহার নিয়েও আপনি টিউন করবেন। কিভাবে ছবি যুক্ত করে তাও শিখাবেন। আপনার উত্তরের অপেক্ষায়।

Level 0

আপু ১৩তম লেসন তো শেষ হলো, আপনি কোথায়?

Level 0

আপু খুব ভাল হয়েছে ,আপনাকে অনেক thanks

Level 0

অনেক অনেক অনেক ভালো হয়েছে…………….next step এ text এর বদলে image দিয়ে link highlight করার নিয়মটা দেখালে খুশি হব……………………………….ধন্যবাদ

Level 0

আপু কবে আবার tune করবেন? এগুলি পড়া শেষ।

Level 0

html diye ki akti full web page banano jai…? thanks for ur tune…

Level 0

ai koyeta korlei ki HTML ar sob kiso sys hoye jabe ???

বস দেখলাম ভালো লাগল কিন্তু আমি একটা সমস্যায় পরেছি তাহল আমি আমার পেজে ঠিকানা নামে একটি বার তৈরি করছি এখন আমি কি ভাবে কাজ করলে ঠিকানা বারে ক্লিক করলে নতুন একটি পেজ আসবে যাতে আমার ঠিকানা লেখা থাকবে । বস আমি কি আপনাকে বোঝাতে পেরেছি না পারলে ! বস কিছু মনে করবেনা দয়া করে আমার পেজে গিয়ে দেখে আমাকে জানালে উপকৃত হতাম । লিংক http://kobitakothea.blogspot.com/

onek onek valo hoise thanks for share .abr akta chance paise ar age onek cahnce pasilam sare disolam abr shikbo.

Level 0

wow………..great………

Level 0

খুব ভালো লাগলো৤ অামি ম্যাক ইউস করি৤ তাই নোট-প্যাড নাই৤ ম্যাক এ কিভাবে ইউস করা যায় জানালে খুসি হব৤ অার নোট-প্যাড এ এক সাথে বংালা ও ইংলিশ লিখতে পারছি না৤ খুব তারাতারি নতুন পব‍র্ দেখার অাশায় রাইলাম৤

সাবিহা apu. Aponar post gulo corom. Apu. Aponi kikoren?