প্রাথমিক HTML কোড বোঝার 5 টি ধাপ

প্রাথমিক HTML কোড বোঝার 5 টি ধাপ

এইচটিএমএল ওয়েবের একটি গুরুত্বপূর্ণ অংশ, যেমনটি আমরা জানি। এবং যখন কিছু ওয়েব ডিজাইনার ম্যানুয়ালি এইচটিএমএল টাইপ করে পেজ তৈরি করেন, তখনও এটি সম্পর্কে কিছুটা জানা সহজ।





আমরা ভাষার কিছু মৌলিক বিষয়গুলি দেখতে যাচ্ছি, যার মধ্যে এইচটিএমএল আসলে কী, কিছু মৌলিক ধারণা এবং এটি অন্যান্য ভাষার সাথে কীভাবে যোগাযোগ করে। এটিকে 'ডামিদের জন্য HTML' ক্র্যাশ কোর্স হিসেবে ভাবুন।



এইচটিএমএল বুনিয়াদি: এইচটিএমএল কি?

HTML মানে হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ । এবং যখন এটি কখনও কখনও প্রোগ্রামিং ভাষার সাথে লাম্প করা হয়, এটি সঠিক নয়।





হিসেবে মার্কআপ ভাষা , HTML শুধুমাত্র আপনাকে পৃষ্ঠাগুলির প্রদর্শন বিন্যাস তৈরি করতে দেয়। একটি সত্য প্রোগ্রাম ভাষা , জাভা বা C ++ এর মত, যুক্তি এবং কমান্ডগুলি সম্পন্ন করা হয়।

যদিও এটি সহজ, HTML ওয়েবের প্রতিটি পৃষ্ঠার মেরুদণ্ডে রয়েছে। কোন পাঠ্যটি সাহসী, চিত্র যুক্ত করা এবং অন্যান্য পৃষ্ঠায় লিঙ্ক করার জন্য এটি দায়ী। আমাদের একটি HTML FAQ আছে যা আরো ব্যাখ্যা করে।



আপনি আপনার ব্রাউজারের অধিকাংশ ওয়েবপেজে ডান ক্লিক করে বেছে নিতে পারেন পৃষ্ঠার উৎস দেখুন অথবা তাদের পিছনে HTML দেখতে অনুরূপ। এটি সম্ভবত অনেক কোড ধারণ করবে যা এইচটিএমএল নয়, তবে আপনি এর মাধ্যমে ছাঁটাই করতে পারেন।

মার্কআপ বা প্রোগ্রামিং ল্যাঙ্গুয়েজ নিয়ে আপনার শূন্য অভিজ্ঞতা থাকলেও, এইচটিএমএল সম্পর্কে কিছুটা শেখা আপনাকে আরও সচেতন ওয়েব ব্যবহারকারী করে তুলবে। এইচটিএমএল কিভাবে কাজ করে তা বুঝতে সাহায্য করার জন্য পাঁচটি মৌলিক ধাপের মধ্য দিয়ে চলুন। আমরা পথের মধ্যে উদাহরণ প্রদান করব।



ধাপ 1: ট্যাগের ধারণা বোঝা

HTML একটি সিস্টেম ব্যবহার করে ট্যাগ নথির বিভিন্ন উপাদানের শ্রেণীবিভাগ করতে।

বেশিরভাগ ট্যাগ জোড়ায় জোড়ায় আসে তাদের ভিতরে প্রভাবিত পাঠ্য মোড়ানো। এখানে একটি সহজ উদাহরণ (



ট্যাগ টেক্সট তৈরি করে সাহসী ; আমরা এক মুহুর্তে এটি নিয়ে আরও আলোচনা করব।)

This is some bold text .

লক্ষ্য করুন কিভাবে ফরওয়ার্ড স্ল্যাশ (/) দিয়ে ক্লোজিং ট্যাগ শুরু হয়। এটি একটি ক্লোজিং ট্যাগকে নির্দেশ করে, যা গুরুত্বপূর্ণ। যদি আপনি একটি ট্যাগ বন্ধ না করেন, তাহলে শুরু থেকে সবকিছুতে সেই বৈশিষ্ট্য থাকবে।

কিভাবে একটি ইউএসবি ড্রাইভ ফরম্যাট করবেন

যাইহোক, সব ট্যাগের জুড়ি নেই। কিছু HTML উপাদান, যাকে বলা হয় খালি উপাদান , কোন বিষয়বস্তু আছে এবং তাদের নিজস্ব অস্তিত্ব আছে। একটি উদাহরণ হল


ট্যাগ, যা একটি লাইন বিরতি। আপনি স্ল্যাশ যোগ করে এই ধরনের ট্যাগগুলি 'বন্ধ' করতে পারেন (যেমন


) কিন্তু এটি কঠোরভাবে প্রয়োজনীয় নয়।

ধাপ 2: কঙ্কাল HTML বিন্যাস

একটি সঠিক এইচটিএমএল ডকুমেন্টে নির্দিষ্ট কিছু ট্যাগ সংজ্ঞায়িত থাকতে হবে যাতে এটি সঠিকভাবে দেওয়া থাকে। এইগুলি অপরিহার্য অংশ:

  • প্রতিটি HTML ডকুমেন্ট অবশ্যই | _+_ | দিয়ে শুরু করতে হবে নিজেকে সেভাবে ঘোষণা করতে। সুতরাং, এর ক্লোজিং ট্যাগ, | _+_ | , একটি HTML ফাইলের শেষ আইটেম।
  • পরবর্তী, | _+_ | বিভাগে পৃষ্ঠার শিরোনাম, পৃষ্ঠায় চলমান বিভিন্ন স্ক্রিপ্ট এবং অনুরূপ তথ্য অন্তর্ভুক্ত রয়েছে। নাম অনুসারে, এটি সাধারণত প্রাথমিকের পরে আসে | _+_ | ট্যাগ শেষ ব্যবহারকারী এই ট্যাগগুলিতে অনেকগুলি সামগ্রী দেখতে পান না।
  • অবশেষে, | _+_ | ট্যাগটি পৃষ্ঠার পাঠ্য ধারণ করে যা পাঠক দেখেন (আরও অনেক কিছু)। এখানে আপনি ছবি, লিঙ্ক এবং আরও অনেক কিছু পাবেন।

যেহেতু

বিভাগটি একটি HTML ডকুমেন্টের একটি বড় অংশ তৈরি করে, আমাদের বাকী অংশটি এর সাথে সম্পর্কিত উপাদানগুলির দিকে নজর দেয়।

ধাপ 3: বিন্যাসের জন্য প্রাথমিক HTML ট্যাগ

এরপরে, আসুন কিছু সাধারণ ট্যাগ দেখি যা HTML নথি তৈরি করে। অবশ্যই, প্রতিটি উপাদানকে কভার করা সম্ভব নয়, তাই আমরা কিছু গুরুত্বপূর্ণ বিষয় পর্যালোচনা করব। আমরা েকে দিয়েছি আরো অনেক HTML উদাহরণ যদি এগুলো আপনাকে সন্তুষ্ট না করে।

যদি এই ট্যাগগুলি বেশ মৌলিক মনে হয়, মনে রাখবেন যে এইচটিএমএল 1993 সালে তৈরি করা হয়েছিল।

সহজ পাঠ্য বিন্যাস

এইচটিএমএল মৌলিক পাঠ্য শৈলী সমর্থন করে যেমন আপনি মাইক্রোসফ্ট ওয়ার্ডে পাবেন:

  • | _+_ | ট্যাগগুলি পাঠ্য তৈরি করে সাহসী ।
  • | _+_ | ট্যাগ (যা 'জোর' এর জন্য দাঁড়িয়েছে) হবে তির্যক করা পাঠ্য

এইচটিএমএল পুরনোদের সমর্থন করে

সাহসী জন্য ট্যাগ এবং

তির্যক জন্য। যাইহোক, উপরেরগুলি ব্যবহার করা ভাল।

সংক্ষেপে,

এবং

কিভাবে কিছু বোঝা উচিত তা দেখান, যখন পরের ট্যাগগুলি আপনাকে বলে যে এটি কেমন হওয়া উচিত। এই প্রাক্তন ট্যাগগুলি দৃষ্টি প্রতিবন্ধীদের দ্বারা ব্যবহৃত স্ক্রিন রিডারদের জন্য আরও সহজলভ্য।

অনুচ্ছেদ এবং অন্যান্য বিভাগ

HTML এর

ট্যাগ আপনাকে নথির একটি বিভাগ নির্ধারণ করতে দেয়। সাধারণত, এটি একটি নির্দিষ্ট উপায়ে একটি বিভাগকে ফর্ম্যাট করার জন্য CSS (নীচে দেখুন) এর সাথে যুক্ত করা হয়।

দ্য

ট্যাগ আপনাকে পাঠ্যকে অনুচ্ছেদে বিভক্ত করতে দেয়। ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে এর আগে এবং পরে কিছু জায়গা রাখবে, যা আপনাকে স্বাভাবিকভাবেই টেক্সট ভাঙতে দেবে।

আপনি আপনার ডকুমেন্টে হেডার যোগ করতে পারেন এবং এটি ব্যবহার করে অনুসরণ করা সহজ করতে পারেন

মাধ্যম

ট্যাগ. H1 হল সবচেয়ে গুরুত্বপূর্ণ শিরোলেখ, যখন H6 সবচেয়ে কম গুরুত্বপূর্ণ। প্রায় প্রতিটি MakeUseOf নিবন্ধটি তথ্য সংগঠিত করতে H2 এবং H3 হেডার ব্যবহার করে।

মারছে প্রবেশ করুন আপনার এইচটিএমএল ডকুমেন্টে লাইন ব্রেক যোগ করা আসলে সেগুলো প্রদর্শন করবে না। পরিবর্তে, আপনি ব্যবহার করতে পারেন

একটি লাইন বিরতি যোগ করতে।

এখানে একটি উদাহরণ যা এই সব ব্যবহার করে:

ধাপ 4: ছবি োকানো

ছবিগুলি বেশিরভাগ ওয়েবপেজের একটি গুরুত্বপূর্ণ অংশ। আপনি এইচটিএমএল দিয়ে এগুলি সহজেই যুক্ত করতে পারেন এবং এমনকি তাদের জন্য বিভিন্ন বৈশিষ্ট্যও সেট করতে পারেন।

আপনি ব্যবহার করে একটি ছবি োকান

ট্যাগ এর সাথে একত্রিত করে

বৈশিষ্ট্যটি আপনাকে নির্দিষ্ট করতে দেয় যে আপনি ছবিটি কোথা থেকে লোড করতে চান।

এর আরেকটি গুরুত্বপূর্ণ বৈশিষ্ট্য

কিভাবে ওয়েবসাইট থেকে ভিডিও রেকর্ড করবেন

ট্যাগ হল

। Alt টেক্সট আপনাকে স্ক্রিন রিডারদের জন্য ইমেজ বর্ণনা করতে দেয় অথবা যদি ছবিটি সঠিকভাবে লোড না হয়। আপনি একটি চিত্রের অল্ট টেক্সট দেখতে মাউস করতে পারেন।

ব্যবহার

এবং




ইমেজ প্রদর্শিত পিক্সেল সংখ্যা নির্দিষ্ট করার জন্য উপাদান।

এটি সব একসাথে রাখুন, এবং একটি চিত্র ট্যাগ এই মত দেখাচ্ছে:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



ওয়ার্ল্ড ওয়াইড ওয়েব অন্যান্য পেজের লিঙ্ক ছাড়া ওয়েব হবে না। ব্যবহার করে

ট্যাগ, আপনি যে কোনও পাঠ্যের অন্যান্য পৃষ্ঠায় লিঙ্ক করতে পারেন।

ভিতরে

src

ট্যাগ,

অ্যাট্রিবিউট বলছে আপনি কোথায় লিঙ্ক করছেন। শুধু ইউআরএল পেস্ট করলে ভালো কাজ হবে। আপনি ব্যবহার করতে পারেন

alt

যখন কেউ লিঙ্কের উপর দিয়ে ঘুরে বেড়ায় তখন একটি বিট টেক্সট যোগ করার উপাদান।

একটি মৌলিক লিঙ্ক এই মত দেখাচ্ছে:

width

দ্য

height

ট্যাগের আরো অনেক সম্ভাব্য উপাদান আছে, কিন্তু আমরা এখানে তাদের মধ্যে ডুব দেব না।

কিভাবে এইচএসএমএল সিএসএস এবং জাভাস্ক্রিপ্টের সাথে সংযোগ স্থাপন করে

আমরা এইচটিএমএল এর মৌলিক এবং কিভাবে এটি একটি ওয়েবপেজ প্রতিষ্ঠা করে তা দেখেছি। কিন্তু আপনি যেমন কল্পনা করতে পারেন, আধুনিক এইচটিএমএল একা এটিকে আধুনিক ওয়েবের জন্য কাটবে না। সাধারণ HTML ওয়েবপেজগুলি 'ওয়েব 1.0' দিনে প্রচলিত ছিল, যখন বেশিরভাগ ওয়েবসাইট স্ট্যাটিক টেক্সট ছাড়া আর কিছুই ছিল না।

কিন্তু এখন, আমাদের আরও অনেক কিছু আছে। CSS (ক্যাসকেডিং স্টাইল শীট) হল এমন একটি ভাষা যা আপনি HTML এ প্রস্তুত করা পাঠ্য দেখতে কেমন তা বর্ণনা করতে ব্যবহৃত হয়। মনে রেখ

Dr. Phil

ট্যাগ আমরা আলোচনা করেছি? এই (এবং অন্যান্য ট্যাগ) এর ভিতরে, আপনি a সংজ্ঞায়িত করতে পারেন

বৈশিষ্ট্য তারপরে, আপনার সহিত CSS নথিতে, আপনি এটি কীভাবে করবেন তার জন্য নির্দেশাবলী লিখতে পারেন

দেখা উচিত।

আপনি আপনার এইচটিএমএল কোডে এই শৈলীর উপাদানগুলিকে সংজ্ঞায়িত করতে পারেন, কিন্তু এটিকে দুর্বল অভ্যাস হিসাবে বিবেচনা করা হয় কারণ এটি বজায় রাখা অনেক বেশি কঠিন। এর সাথে আরও জানুন এই সহজ CSS উদাহরণ । এছাড়াও চেক আউট কিভাবে আপনার CSS ফাইল অপটিমাইজ করা যায় ।

জাভাস্ক্রিপ্ট

আমরা দেখেছি যে HTML বিষয়বস্তু নির্ধারণ করে এবং CSS চেহারা নির্ধারণ করে। জাভাস্ক্রিপ্ট, ওয়েবের জন্য অত্যাবশ্যক ত্রয়ীর চূড়ান্ত সদস্য, ওয়েব পৃষ্ঠাগুলিকে প্রতিবার একটি নতুন পৃষ্ঠা লোড না করে মানুষের কর্মের প্রতিক্রিয়া জানাতে দেয়।

উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট একটি ওয়েবসাইটকে আপনাকে সতর্ক করার অনুমতি দেয় যে আপনি প্রবেশ করা পাসওয়ার্ডটি জমা দেওয়ার চেষ্টা করার আগে তার প্রয়োজনীয়তা পূরণ করে না। একজন ওয়েব ডিজাইনার জাভাস্ক্রিপ্ট ব্যবহার করে একটি স্লাইডশোতে চিত্রের মাধ্যমে চক্র ব্যবহার করতে পারেন অথবা ব্যবহারকারীকে ইনপুটের জন্য অনুরোধ করতে পারেন।

এগুলি মাত্র কয়েকটি প্রাথমিক উদাহরণ। জাভাস্ক্রিপ্ট একটি স্ক্রিপ্টিং ভাষা যা পুরোপুরি অনেক কিছু করতে সক্ষম এবং এটি তুলনামূলকভাবে এইচটিএমএল এবং সিএসএসের চেয়ে অনেক জটিল। দেখা জাভাস্ক্রিপ্ট সম্পর্কে আমাদের ওভারভিউ আরো অনেক কিছুর জন্য।

ওয়েব ডিজাইনের সম্পূর্ণ পরিধি দেখা এই নিবন্ধের আওতার বাইরে, কিন্তু এটা বলার জন্য যথেষ্ট যে HTML আজ অন্যান্য ওয়েবপেজ তৈরির জন্য অন্যান্য ভাষার সাথে যোগাযোগ করে।

HTML এর বিবর্তন

এটা মনে রাখা গুরুত্বপূর্ণ যে HTML স্থির নয়। এইচটিএমএল বেশ কয়েকটি পুনর্বিবেচনার মধ্য দিয়ে গেছে, সবচেয়ে সাম্প্রতিক হচ্ছে এইচটিএমএল ৫। উল্লেখযোগ্যভাবে, এই মান অ্যাডোব ফ্ল্যাশের মতো মালিকানাধীন ফরম্যাটের উপর নির্ভর না করে নেটিভ ভিডিও এম্বেডিং সমর্থন করে।

এইচটিএমএল -এর নতুন পুনরাবৃত্তিও নির্দিষ্ট কিছু প্রত্নতাত্ত্বিক ট্যাগকে সময়ে সময়ে অপ্রচলিত বলে ঘোষণা করে। এর মধ্যে রয়েছে ভয়াবহ ট্যাগের মতো

href

এবং

title

(যে যথাক্রমে স্ক্রল এবং ফ্ল্যাশ টেক্সট) সাধারণত 1990 এর দশকের ওয়েবসাইট ডিজাইনে দেখা যায়। সুতরাং মনে রাখবেন যে সময়ের সাথে মানগুলি পরিবর্তিত হয়।

একটি সামান্য HTML জ্ঞান একটি দীর্ঘ পথ যায়

আমরা কিভাবে একটি HTML ডকুমেন্ট কাজ করে তার একটি সংক্ষিপ্ত সফর করেছি। এখন আপনি ওয়েবপৃষ্ঠাগুলি কীভাবে গঠন করা হয়েছে তার মৌলিক বিষয়গুলি জানেন। এমনকি যদি আপনি ওয়েবপেজ তৈরি করতে না যান, আপনি প্রতিদিন যে ওয়েব ব্যবহার করেন সে সম্পর্কে আপনি একটু বেশি সচেতন।

আমি কি PS4 তে প্লেস্টেশন 3 গেম খেলতে পারি?

আরও জানতে, আপনার ওয়েব ডেভেলপমেন্ট দক্ষতাগুলি প্রয়োজনীয় সরঞ্জামগুলির সাথে আপগ্রেড করুন এবং তারপরে পরীক্ষা করে দেখুন আপনার প্রথম ওয়েবসাইট কিভাবে ডিজাইন করবেন সে সম্পর্কে আমাদের গাইড ।

ইমেজ ক্রেডিট: Belyaevskiy/ জমা ছবি

শেয়ার করুন শেয়ার করুন টুইট ইমেইল আপনার ভার্চুয়ালবক্স লিনাক্স মেশিনগুলিকে সুপারচার্জ করার 5 টি টিপস

ভার্চুয়াল মেশিন দ্বারা দেওয়া খারাপ পারফরম্যান্সে ক্লান্ত? আপনার ভার্চুয়ালবক্সের কর্মক্ষমতা বাড়ানোর জন্য আপনার যা করা উচিত তা এখানে।

পরবর্তী পড়ুন সম্পর্কিত বিষয়
  • প্রোগ্রামিং
  • এইচটিএমএল
  • ওয়েব ডেভেলপমেন্ট
  • জাভাস্ক্রিপ্ট
  • ওয়েবমাস্টার টুলস
  • প্রোগ্রামিং
  • HTML5
লেখক সম্পর্কে বেন স্টেগনার(1735 নিবন্ধ প্রকাশিত)

বেন একজন ডেপুটি এডিটর এবং মেক ইউসঅফের অনবোর্ডিং ম্যানেজার। তিনি ২০১ IT সালে ফুল-টাইম লেখার জন্য তার আইটি চাকরি ছেড়ে দিয়েছিলেন এবং কখনোই পিছনে ফিরে তাকাতে হয়নি। তিনি সাত বছরেরও বেশি সময় ধরে একজন পেশাদার লেখক হিসেবে টেক টিউটোরিয়াল, ভিডিও গেম সুপারিশ এবং আরও অনেক কিছু কভার করছেন।

বেন স্টেগনার থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন