ওয়েবসাইট, ব্লগ, ওয়েব পেজ - আমাদের সময়ে আগে থেকেই পরিচিত ধারণা। ইন্টারনেটের বিকাশের সাথে, ওয়েব পৃষ্ঠাগুলি হোস্ট করার জন্য সাইটগুলি অবিশ্বাস্যভাবে জনপ্রিয় হয়ে উঠেছে এবং এটি আশ্চর্যজনক নয়: কিছু লোকের জন্য, তাদের নিজস্ব ওয়েবসাইট থাকা একটি প্রয়োজনীয়তা, অন্যদের জন্য এটি একটি আনন্দদায়ক বিনোদন। প্রথম ক্ষেত্রে, আমরা সাধারণত ফার্ম, কর্পোরেশন, বেসরকারী উদ্যোক্তাদের কথা বলি, যখন তারা চাহিদা অনুযায়ী কোনো পণ্য বা পরিষেবার বিজ্ঞাপন দেয়। দ্বিতীয়টি ব্লগারদের সম্পর্কে।
এটি ছাড়াও, ইন্টারনেট ব্যবহারকারীরা আছেন যারা কেবল তথ্য অনুসন্ধান করেন, ব্লগ পড়েন, ভিডিও দেখেন ইত্যাদি।
একটি মানসম্পন্ন ওয়েবসাইট তৈরি করতে, অনেকগুলি বিকল্প রয়েছে। আমরা HTML এর মাধ্যমে ওয়েব প্রোগ্রামিং এর উপর ফোকাস করব।
HTML কি
HTML মানে হাইপার টেক্সট মার্ক-আপ ল্যাঙ্গুয়েজ। ইংরেজি থেকে অনুবাদ করা হয়েছে, এর অর্থ হল "হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ"।
অন্য কথায়, HTML হল কোডের একটি সেট যার সাহায্যে আপনি সাইটের প্রধান উপাদান তৈরি করতে পারেন, এর ফ্রেম, যেমনশব্দগুলো কিভাবে বাক্য দিয়ে গঠিত হয়।
HTML কোডগুলি একচেটিয়াভাবে ল্যাটিন অক্ষরে লেখা হয় এবং একে ট্যাগ বলা হয় এবং প্রতিটি কোড কোণ বন্ধনীতে আবদ্ধ থাকে। কিছু ট্যাগ পেয়ার করা আছে, কিছু আনপেয়ার করা হয়েছে।
পেয়ার করা মানে তাদের অবশ্যই জোড়ায় জোড়ায় ব্যবহার করতে হবে। উদাহরণস্বরূপ, ওপেনিং ট্যাগ নির্দেশ করে যে এটি একটি ওয়েব পেজে কোথায় শুরু হয় এবং ক্লোজিং ট্যাগ নির্দেশ করে যে এটি কোথায় থামবে। খোলার কোণ বন্ধনীর পরে একটি স্ল্যাশ অক্ষরের উপস্থিতি দ্বারা পরবর্তীটি পূর্বের থেকে পৃথক। উদাহরণস্বরূপ, হল খোলার ট্যাগ,হল ক্লোজিং ট্যাগ৷
আনপেয়ার করা ট্যাগগুলির কোনও অংশীদারের প্রয়োজন নেই৷
অনেক ট্যাগের বৈশিষ্ট্য থাকতে পারে - অতিরিক্ত উপাদান যা এটিকে আরও নির্দিষ্ট অর্থ দেয়। উদাহরণস্বরূপ, ট্যাগ.
যেখানে HTML ব্যবহার করা হয়
এইচটিএমএল কোথায় প্রয়োজন তার ক্লাসিক উপলব্ধি হল ওয়েবসাইট তৈরি করা।
অভ্যাসে, এটি যথেষ্ট হতে পারে, যেহেতু HTML আপনাকে সাইটের প্রধান উপাদান, মেনু (মাল্টি-লেভেল সহ), ব্যাকগ্রাউন্ড সেট, টেক্সট, ছবি, অডিও, ভিডিও, ফন্ট এডিট করতে দেয়। এবং আরো অনেক কিছু।
তবে, এমন অন্যান্য ভাষা রয়েছে যা আপনাকে একটি ওয়েব পৃষ্ঠায় আরও আকর্ষণীয় এবং প্রায়শই প্রয়োজনীয় উপাদান যোগ করতে দেয়:
- CSS সম্পূর্ণ সাইটের জন্য শৈলী সেট করে, ট্যাগ ব্যবহার করে স্বতন্ত্র উপাদানগুলির শৈলী বৈশিষ্ট্যগুলিকে ক্রমাগত নির্দিষ্ট করার প্রয়োজন ছাড়াই - উদাহরণস্বরূপ, পাঠ্যের রঙ এবং ফন্ট৷
- স্ক্রিপ্ট ভাষা আপনাকে সাইটে মিনি-প্রোগ্রাম (স্ক্রিপ্ট) বিকাশ এবং এম্বেড করতে দেয়, থেকে শুরু করেসাধারণ নান্দনিক জিনিসগুলি (মাউস দিয়ে ঘোরানোর সময় লিঙ্কের রঙ পরিবর্তন করা) এবং কার্যকরী জিনিসগুলির সাথে শেষ হয় (গ্রাহকের ইমেল ঠিকানা, ফোন নম্বর সংগ্রহ করা)।
- PHP এর মাধ্যমে আপনি আপনার নিজস্ব গেস্টবুক বা মন্তব্য করার সিস্টেম তৈরি করতে পারেন।
এছাড়াও বিতরণের জন্য ইমেল তৈরিতে HTML ব্যবহার করা হয়।
একটি লিঙ্ক কি
এরা আপনাকে সাইটের ভিতরে এবং বাহ্যিক উভয় ওয়েব পৃষ্ঠায় নেভিগেট করার অনুমতি দেয়৷
HTML লিঙ্কগুলি সাধারণত ব্যবহৃত হয়:
- একটি বাহ্যিক ওয়েব রিসোর্সে যেতে।
- সাইটের মধ্যে পৃষ্ঠাগুলি সরাতে।
- গুগল ফর্মে যেতে।
এইচটিএমএল-এ উৎসের একটি লিঙ্কও প্রায়শই নির্দেশিত হয়, বিশেষ করে যেহেতু অন্য সাইট থেকে উপাদান কপি করার সময়, আপনাকে অবশ্যই লেখক উল্লেখ করতে হবে। অন্যথায়, অ্যাট্রিবিউশন ছাড়া কপি করা কপিরাইট লঙ্ঘন, বিষয়বস্তু চুরি এবং ব্যাকফায়ারের সংজ্ঞার আওতায় পড়তে পারে। উপরন্তু, ধার করা, অ-অনন্য উপকরণ ব্যবহার এসইও কর্মক্ষমতা হ্রাস করে, এবং উত্সের সাথে একটি লিঙ্ক নির্দেশ করে ঝুঁকি হ্রাস করে৷
লিংকের প্রকার
শাস্ত্রীয় অর্থে, একটি লিঙ্ক হল একটি ওয়েব রিসোর্সের ঠিকানা যেখানে আপনি ক্লিক করে যেতে পারেন৷
এটি ছাড়াও, হাইপারলিঙ্ক রয়েছে: পাঠ্য এবং চিত্র। এই ক্ষেত্রে, HTML লিঙ্কটি কিছু বাক্য (শব্দ) বা চিত্রের নীচে "লুকানো" থাকে এবং এটি অনুসরণ করার জন্য, আপনাকে পাঠ্য বা চিত্রটিতে ক্লিক করতে হবে৷
অন্যান্য ধরনের লিঙ্ক:
- আনভিজিটেড - একটি লিঙ্ক যা এখনও একটি নির্দিষ্ট সেশনের সময় ক্লিক করা হয়নি৷ উদাহরণস্বরূপ, আপনি যদি গতকাল এই লিঙ্কটি অনুসরণ করেন, তারপরে আপনার কম্পিউটারটি বন্ধ করে দেন এবং আজ এটিকে আবার চালু করেন, এখন একটি নতুন অধিবেশন শুরু হওয়ার কারণে লিঙ্কটি আবার দেখা হবে না৷
- সক্রিয় - এই অবস্থায়, লিঙ্কটি খুব অল্প সময়ের জন্য সংরক্ষিত হয়: লিঙ্কটিতে ক্লিক করা এবং এটি অনুসরণ করার মধ্যে ব্যবধান।
- পরিদর্শন করা হয়েছে - একটি লিঙ্ক যা ইতিমধ্যে একটি অধিবেশন চলাকালীন অন্তত একবার পরিদর্শন করা হয়েছে৷
নিয়মিত পাঠ্য লিঙ্কগুলির জন্য, পরিদর্শন করাগুলি অন্যথায় নির্দিষ্ট না হলে রঙ পরিবর্তন করতে থাকে৷
একটি হাইপারলিঙ্ক করা ছবি তার চেহারা পরিবর্তন করে না, তা পরিদর্শন করা হোক বা না হোক।
কীভাবে একটি নিয়মিত লিঙ্ক ঢোকাবেন
অনেক ওয়েব রিসোর্স সাইটের ঠিকানাটিকে একটি লিঙ্ক হিসাবে উপলব্ধি করে, অবিলম্বে এটিকে ক্লিকযোগ্য করে তোলে এবং রঙ দিয়ে হাইলাইট করে। উদাহরণস্বরূপ, যদি ঠিকানাটি মেসেঞ্জারে বা ই-মেইলের মাধ্যমে পাঠানো হয়, তাতে ক্লিক করে আপনি সাইটে যেতে পারেন।
এইচটিএমএল ব্যবহার করে নিজে একটি সাইট তৈরি করার ক্ষেত্রে, আপনাকে একটি বিশেষ ট্যাগ ব্যবহার করে একটি লিঙ্ক সন্নিবেশ করতে হবে। এটি এই মত দেখাবে: ওয়েবসাইটের ঠিকানা। এইচটিএমএল-এ লিংক টেক্সট অবশ্যই প্রোটোকল সহ সম্পূর্ণভাবে উল্লেখ করতে হবে।
কীভাবে একটি টেক্সট হাইপারলিঙ্ক ঢোকাবেন
আগেই বলা হয়েছিল যে একটি টেক্সট হাইপারলিঙ্ক একটি নিয়মিত লিঙ্কের মতো একই কাজ করে, তবে আরও নান্দনিকভাবে আনন্দদায়ক দেখায়: সাইটের ঠিকানার পরিবর্তে, যা প্রায়শই অপ্রয়োজনীয়ভাবে দীর্ঘ হয়, একটি শব্দ বা বাক্যাংশ নির্দেশিত হয়। উদাহরণস্বরূপ, "এখানে তথ্য সন্ধান করুন" বাক্যটিতে, আপনি লিঙ্কটি লুকিয়ে রাখতে পারেনশব্দ "এখানে"। এটি হাইলাইট করা হবে এবং এটিতে ক্লিক করলে ব্যবহারকারীকে পছন্দসই সাইটে নিয়ে যাবে।
কিভাবে HTML লিংক তৈরি করা যায় তা আগেই আলোচনা করা হয়েছে। আপনি একই ট্যাগ ব্যবহার করে একটি পাঠ্য হাইপারলিঙ্ক সন্নিবেশ করতে পারেন। একমাত্র পার্থক্য হল আপনাকে ট্যাগগুলির মধ্যে উল্লেখ করতে হবে যে পাঠ্যটির নীচে লিঙ্কটি লুকানো হবে: দৃশ্যমান পাঠ্য৷
কীভাবে একটি ছবি হাইপারলিঙ্ক ঢোকাবেন
এটা এখানে একটু বেশি জটিল। আমরা একই ট্যাগ ব্যবহার করি, কিন্তু পাঠ্যের পরিবর্তে, আপনাকে চিত্রটির পথ নির্দিষ্ট করতে হবে।
পথটি চিত্রটির অবস্থান। যদি ছবি (ছবি) একটি ফাইল শেয়ারিং পরিষেবাতে অবস্থিত হয়, তাহলে আপনাকে একটি স্ল্যাশের মাধ্যমে চিত্রের পথ বরাবর সমস্ত ফোল্ডার নির্দিষ্ট করতে হবে। সম্ভব হলে আপনি একটি ছবির লিঙ্কও অন্তর্ভুক্ত করতে পারেন।
ট্যাগ করতে
src ছাড়াও, অন্যান্য বৈশিষ্ট্যগুলিও প্রযোজ্য, যা আপনাকে ছবির উচ্চতা, প্রস্থ এবং অবস্থান এবং আরও অনেক কিছু সামঞ্জস্য করতে দেয়৷ তাদের মধ্যে কিছু:
- Src - ছবিটির পথ নির্দিষ্ট করে৷
- Lowsrc - আগের অ্যাট্রিবিউটের মতো, কিন্তু নিম্নমানের ছবির জন্য নির্দিষ্ট করা হয়েছে।
- উচ্চতা - ছবির উচ্চতা।
- প্রস্থ - এর প্রস্থ।
- Alt - ছবির বিবরণ। যখন আপনি একটি ফটো বা ছবির উপর হোভার করেন, তখন এই অ্যাট্রিবিউটে উল্লেখিত টেক্সট পপ আপ হবে।
- সীমানা - চিত্রের চারপাশে সীমানার পুরুত্ব নির্ধারণ করে।
অ্যাট্রিবিউটগুলি ট্যাগের পরে নির্দিষ্ট করা হয় এবং অন্তর্ভুক্ত করা হয়৷এর রচনা। বৈশিষ্ট্য অবশ্যই তার মান অনুসরণ করতে হবে। উদাহরণস্বরূপ, বৈশিষ্ট্যগুলির জন্য "উচ্চতা" বা "প্রস্থ" (উচ্চতা, প্রস্থ) ওয়েব পৃষ্ঠায় চিত্রের উচ্চতা নির্দিষ্ট করে। পরিমাপের একক হল পিক্সেল, যদি না অন্যথায় নির্দিষ্ট করা হয়।
এটা এরকম দেখাবে: <a href="ওয়েব পৃষ্ঠার ঠিকানা"
এই বৈশিষ্ট্যগুলি ছবির জন্য উপযুক্ত আকার সেট করতে সাহায্য করবে। সীমানা ছবিটির চারপাশে একটি অদৃশ্য সীমানা তৈরি করতে সহায়তা করে৷
উপরের বৈশিষ্ট্যগুলি ইমেজ সন্নিবেশ ট্যাগের জন্য আলাদাভাবে প্রযোজ্য। যেমন:.
অ্যাঙ্কর লিঙ্ক কি
অ্যাঙ্কর লিঙ্ক তৈরি করা একটি খুব দরকারী দক্ষতা। প্রায়শই একটি দীর্ঘ টেক্সট ব্লক বা একটি পৃষ্ঠায় একাধিক উপধারা সহ একটি ওয়েব পৃষ্ঠা তৈরি করার প্রয়োজন হয়। এই ক্ষেত্রে, আপনি অবিলম্বে পাঠ্য বা ওয়েব পৃষ্ঠার সাবসেকশনগুলির লিঙ্কগুলির একটি তালিকা দিয়ে শুরু করতে পারেন এবং আপনি যখন সেগুলিতে ক্লিক করেন, ব্যবহারকারী সরাসরি অনুরোধ করা বিভাগে যাবেন৷
অ্যাঙ্কর লিঙ্ক তৈরি করতে অন্য ধরনের লিঙ্কের তুলনায় অ্যাট্রিবিউট ট্যাগ বেশি ব্যবহার করতে হবে।
প্রথমে, আপনাকে উপরের অ্যাট্রিবিউট ব্যবহার করে তথ্যের প্রতিটি ব্লক বা পাঠ্যের উপবিভাগের জন্য সামগ্রিক মান সেট করতে হবে এবং তারপরে সংশ্লিষ্ট লিঙ্কের সাথে এটি সংযুক্ত করতে হবে।
এগুলির বৈশিষ্ট্যগুলি আরও বিস্তৃত, তাই প্রথমে সহজ লিঙ্কগুলি তৈরিতে দক্ষতা অর্জন করার পরামর্শ দেওয়া হয় এবং তারপরে অ্যাঙ্কর লিঙ্কগুলি গঠনে এগিয়ে যান৷
টিপস
অভিজ্ঞদের কাছ থেকে সাহায্যপ্রোগ্রামার:
- আপনি এটি তৈরি করতে পারেন যাতে একটি লিঙ্ক সম্পর্কে তথ্য HTML এ হোভারে প্রদর্শিত হয়। এর জন্য, Alt অ্যাট্রিবিউট, যা আমরা গ্রাফিক উপাদানগুলির জন্যও ব্যবহার করি, কাজে আসতে পারে৷
- এইচটিএমএল ব্যবহার করে লিঙ্কগুলির একটি তালিকা তৈরি করা সম্ভব। বিশেষ করে, এটি অ্যাঙ্কর লিঙ্কগুলির জন্য উপযোগী হতে পারে, সেইসাথে যখন আপনাকে ওয়েব সংস্থানগুলির একটি তালিকা তৈরি করতে হবে যা সরাসরি বর্তমান ওয়েব পৃষ্ঠা থেকে একটি লিঙ্ক দ্বারা অনুসরণ করা যেতে পারে৷
- CSS এবং JavaScript, সেইসাথে কিছু HTML ফাংশনের সাহায্যে, আপনি স্বাভাবিকের চেয়ে ভিন্ন ধরনের টেক্সট লিঙ্ক এবং হাইপারলিঙ্ক তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি যখন একটি লিঙ্কের উপর হোভার করেন, তখন এটি তার রঙ পরিবর্তন করতে পারে এবং কার্সারটি দূরে থাকলে আগেরটিতে ফিরে যেতে পারে। এটি একটি কাস্টম জাভাস্ক্রিপ্ট স্ক্রিপ্ট দিয়ে করা যেতে পারে। এছাড়াও, লিঙ্কের রঙটি অনাদর্শিতদের জন্য নীল বা পরিদর্শনের জন্য বেগুনি ছাড়া অন্য কিছুতে সেট করা যেতে পারে। এটি CSS এর কাজ।
- লিঙ্কের অপব্যবহার করবেন না। অনেক অনুপযুক্ত লিঙ্ক সহ একটি ওয়েব পৃষ্ঠা ঢালু এবং অগোছালো দেখায়৷
- নিশ্চিত করুন যে ব্যবহারকারী বুঝতে পারে যে ছবিটির সাথে হাইপারলিঙ্কটি সত্যিই একটি চিত্র, এবং শুধুমাত্র একটি ছবি নয়৷
উপসংহার
এইচটিএমএল-এ একটি পেজ লিঙ্ক করা খুবই সহজ। এই ভাষার সমস্ত মূল বিষয়গুলি অনুসরণ করা গুরুত্বপূর্ণ, যেহেতু একটি ছোট ভুলও এই সত্যের দিকে নিয়ে যেতে পারে যে কোনও ফলাফল হবে না এবং কোডটি কাজ করবে না৷
