কন্টেন্ট

• ধাপ
• 1 এর পদ্ধতি 1: একটি HTML পৃষ্ঠা লেখা
• পরামর্শ
• সতর্কবাণী
• তোমার কি দরকার

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

ধাপ

1 এর পদ্ধতি 1: একটি HTML পৃষ্ঠা লেখা

1. 1 আপনি এখানে উপস্থাপিত ধাপগুলির মধ্যে একটিতে নিজেকে পরিচিত করা শুরু করার আগে, "আপনার কী দরকার" বিভাগটি দেখুন।
2. 2 এই সমস্যাটি বুঝতে শুরু করার আগে আপনার যা জানা উচিত:
3. 3 অধিকার. আপনি কি কখনও ট্যাগ শুনেছেন? ট্যাগটি কোণ বন্ধনী দ্বারা বেষ্টিত, যার ভিতরে শব্দটি রয়েছে। শেষ ট্যাগ একই আকারে লেখা, কিন্তু প্রথম কোণ বন্ধনী পরে একটি স্ল্যাশ যোগ সঙ্গে। একটি বৈশিষ্ট্য একটি ট্যাগের একটি wordচ্ছিক শব্দ যা একটি ট্যাগে বিশদ যোগ করতে ব্যবহৃত হয়।
4. 4 দলিলের শুরু। আপনি যেই টেক্সট এডিটর ব্যবহার করছেন তাতে নিম্নলিখিত পেস্ট করুন:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   ট্যাগটি অবশ্যই একই ট্যাগ দিয়ে বন্ধ করতে হবে, কিন্তু প্রথম কোণ বন্ধনী পরে একটি স্ল্যাশ দিয়ে। ট্যাগের মতো ব্যতিক্রম আছে মেটা অথবা ডক্টাইপ.
5. 5 ডক্টাইপ
   • সাধারণত, অধিকাংশ ওয়েব পেজ সেট করা হয় ডক্টাইপ ”। এটি এনকোডিং নির্ধারণের পাশাপাশি ওয়েব ব্রাউজারগুলি কীভাবে উপলব্ধি করবে তা নির্ধারণ করতে সহায়তা করে। বেশিরভাগ পৃষ্ঠাগুলি এটি ছাড়া কাজ করবে, "তবে আপনি যদি মিল করতে চান তবে এটি প্রয়োজনীয় (তারা ইন্টারনেটে এনকোডিংয়ের ধরন এবং সেগুলি কীভাবে ব্যবহার করা হয় তা নিয়ন্ত্রণ করে)... HTML 4.01 এর জন্য DOCTYPE নিচে উপস্থাপন করা হয়েছে:! সবচেয়ে সাধারণ DOCTYPE সমস্ত ইন্টারনেটের পৃষ্ঠায় ব্যবহৃত হয়।প্রথমে, এটি 'এইচটিএমএল' বর্ণনাকারী পৃষ্ঠার ধরনকে নির্দেশ করে, তারপর এটি এনকোডিংয়ের ধরনকে তুলে ধরে, এবং পরিশেষে, ডক্টাইপের অবস্থান, যা ফলস্বরূপ, ওয়েব ব্রাউজারের জন্য পৃষ্ঠাটি বর্ণনা করে।
   • বিভিন্ন ধরণের এইচটিএমএল রয়েছে (বছরের পর বছর ধরে বিভিন্ন সংস্করণ বিকশিত হয়েছে), উদাহরণস্বরূপ নতুন ট্যাগ বা নির্দিষ্ট ট্যাগ ব্যবহার করে। কিছু ট্যাগ অপ্রচলিত (পরিবর্তে অন্যান্য আরো দরকারী ট্যাগ ব্যবহার করা হয়)।
   • b> এবং আমি> - এটি বর্তমানে ট্যাগের উপর আরোপিত, কারণ সেগুলি পাঠ্য রূপান্তর করতে ব্যবহৃত হয়, কিন্তু স্পেসিফিকেশন নয়, ফলস্বরূপ, অন্যান্য ট্যাগগুলি তাদের প্রতিস্থাপন করতে আসে। ট্যাগ শক্তিশালী> জন্য একটি প্রতিস্থাপন b>, এবং em>, জন্য একটি প্রতিস্থাপন আমি>.
   • এটা গুরুত্বপূর্ণ যে পূর্ববর্তী ট্যাগগুলি এমন ট্যাগ দ্বারা প্রতিস্থাপিত হয় যা বিন্যাসের চেয়ে বেশি। যদি লেখাটি অনুবাদ করা হয়, তাহলে শুধু বিন্যাসই নয়, এর অর্থও একই থাকে। এটি শব্দগতভাবে সঠিক।
   • এক্সএইচটিএমএল সংস্করণ 2.0 এ, <b> এবং আমি> HTML সংস্করণ 3+ এর মতো ব্যবহার করা হয়নি।
6. 6 এইচটিএমএল "এনক্যাপসুলেশন রুল"।
   • আসুন বর্তমানে ব্যবহৃত আরও গুরুত্বপূর্ণ ট্যাগগুলি দেখে নেওয়া যাক। পৃষ্ঠা তৈরির সময়, একটি সাধারণ কাঠামো ব্যবহার করা হয়। যদি একটি ট্যাগ খোলা হয়, তাহলে ফলস্বরূপ, এটা বন্ধ করা উচিত... এটি পুরো কাঠামোর জন্য প্রযোজ্য। এখানে XHTML লেআউট কাঠামোর একটি বৈধ উদাহরণ:
   • !
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • মাথা>
   • মেটা http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • শিরোনাম> হ্যালো ওয়ার্ল্ড!
   • / মাথা>
   • শরীর>
   • h1> হ্যালো ওয়ার্ল্ড! < / h1>
   • / শরীর>
   • / html>
   • নমুনা কোড যা একটি বার্তা প্রদান করে ওহে বিশ্ব... একে বলা হয় পরীক্ষা ওহে বিশ্ব.
7. 7 শিরোনাম
   • ওয়েব পেজের শিরোনাম হল ট্যাগের মধ্যবর্তী বিষয়বস্তু মাথা>... এই সামগ্রীটি ব্যবহারকারী দ্বারা দেখা যাবে না (শুধুমাত্র শিরোনাম যা পৃষ্ঠার শিরোনামে দেখানো হয়েছে)। ট্যাগের মধ্যে তথ্য মাথা>, অন্যান্য ট্যাগগুলি সংযুক্ত করতে পারে, যেমন:
     
     
     • মেটা ট্যাগ তথ্যের জন্য ব্যবহৃত হয় যা সার্চ ইঞ্জিন এবং অন্যান্য ইউটিলিটিগুলির জন্য দরকারী।
     • LINK ট্যাগ যা ডকুমেন্টের মধ্যে একটি লিঙ্ক তৈরি করে, উদাহরণস্বরূপ স্টাইল (CSS) এর জন্য।
     • স্ক্রিপ্ট ট্যাগ, এতে দূরবর্তীভাবে অ্যাক্সেস করার ক্ষমতা সহ অন্য যে কোনও ওয়েব কোডিং অন্তর্ভুক্ত রয়েছে (অন্য নথি থেকে)।
     • স্টাইল ট্যাগ, যা মূলত একটি শৈলী যা একটি পৃষ্ঠায় প্রয়োগ করা যেতে পারে।
     • TITLE ট্যাগ হল সেই শিরোনাম যা আপনার ওয়েব ব্রাউজারে একটি পৃষ্ঠার শিরোনাম হিসেবে উপস্থিত হয়।
   • এই ওয়েবসাইট থেকে নেওয়া একটি উদাহরণ শিরোনামে এর মধ্যে কিছু ডেমো দেখি (এটি সংক্ষিপ্ত করা হয়েছে):
     • মাথা>
     • title> ... / title>
     • মেটা নাম = "বর্ণনা" বিষয়বস্তু = "..." />
     • লিঙ্ক rel = "stylesheet" type = "text / css" href = "..." />
     • মেটা http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • স্ক্রিপ্ট টাইপ = "টেক্সট / জাভাস্ক্রিপ্ট" src = "..."> / স্ক্রিপ্ট>
     • / মাথা>
       
       যদি আপনি খেয়াল না করেন, তাহলে পৃথক ট্যাগগুলি হাইলাইট করা হয়েছে, প্রকৃত তথ্য সরানো হয়েছে। উদাহরণটি বরং সংক্ষিপ্ত, প্রায় প্রতিটি ট্যাগ দেখা যাচ্ছে যা পাওয়া যাবে মাথা>এইচটিএমএল মন্তব্য ছাড়া (আমরা সহজ ট্যাগে এই বিষয়ে কথা বলব)।
8. 8 সর্বত্র সহজ ট্যাগ
   • চলুন এবং অন্যান্য ট্যাগগুলি দেখি। আপনার ট্যাগিং সম্পর্কে সতর্ক থাকুন এবং থাম্বের নিয়মটি মনে রাখবেন, "এনক্যাপসুলেশন।"
     
     
     • <strong> গুরুত্বপূর্ণ পাঠের উপর জোর দেয়।
     • ছোট> পাঠ্যকে ছোট করে তোলে। ফন্ট সাইজ 1 থেকে 7 পর্যন্ত স্ট্যান্ডার্ড ইউনিটে পরিমাপ করা হয়, 3 হল ডিফল্ট টেক্সট সাইজ। ...
     • pre> সমৃদ্ধ পাঠ্যের একটি ব্লক সংজ্ঞায়িত করে। যেহেতু এটি সঠিক, এই ধরনের পাঠ্য একই আকারের ফন্টে এবং শব্দের মধ্যে সমস্ত ফাঁক দিয়ে টাইপ করা হয়।
     • em> একটি ফ্রেজ হিসেবে টেক্সট দেখায়।
     • del> টেক্সট বের করে।
     • ins> নথিতে সন্নিবেশ করা হয়েছে এমন পাঠ্যকে সংজ্ঞায়িত করে।
     • h1> অনেক হেডিং ট্যাগের মধ্যে একটি। এই ধরনের ট্যাগ সংখ্যার পার্থক্য সহ 'h' দিয়ে শুরু হয়। একই নম্বর দিয়ে ট্যাগ বন্ধ করতে ভুলবেন না।
     • p> একটি অনুচ্ছেদ সংজ্ঞায়িত করে।
     • ! --- ... ---> অন্যান্য ট্যাগের মত নয়, মন্তব্যটি অবশ্যই ট্যাগের ভিতরে থাকতে হবে। এই তথ্যটি তখনই দৃশ্যমান হয় যখন কোডটি দেখা হয়।
     • blockquote> একটি উদ্ধৃতি দেখায়, উদ্ধৃতি> ট্যাগ ব্যবহার করা যেতে পারে।
     • উপরের কয়েকটি উদাহরণ বিদ্যমান ট্যাগগুলির সম্পূর্ণ তালিকা নয়। অন্যদের সম্পর্কে জানতে, পরিদর্শন করুন।
9. 9 একটি পরিষ্কার কাঠামো তৈরি করা
   • পৃষ্ঠাগুলিকে ট্যাগের সহজ সেটগুলিতে ডেটা রাখার জন্য ডিজাইন করা হয়েছে যাতে আমরা তথ্যগুলিকে অনুচ্ছেদে বিশ্লেষণ করতে পারি। কম্পিউটার ডেটা চিনে; এটি প্রসঙ্গ বা ধারণাগত সংযোগ সম্পর্কে জানে না। আমাদের কম্পিউটার বান্ধব HTML পৃষ্ঠা তৈরি করতে হবে। এটি div ট্যাগ ব্যবহার করে অর্জন করা হয়। এটি বিপুল সংখ্যক পৃষ্ঠা তৈরি করতে সাহায্য করে। এটি CSS দিয়ে স্টাইল করা যায় এবং লেআউটের জন্য বড় কোড টেবিল তৈরির চেয়ে সহজ।
     • div> এই ট্যাগটি বিশেষ কারণ এটি স্টাইল করা যায় এবং ব্যবহারকারী এবং কম্পিউটার উভয়ই বুঝতে পারে এমন পৃথক পৃথক তথ্য ব্যবহার করে।
   • আসুন একটি সাধারণ HTML লেআউট দেখে নেওয়া যাক যা একটি div ট্যাগ ব্যবহার করে।
     • !
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • মাথা>
     • মেটা http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • শিরোনাম> হ্যালো ওয়ার্ল্ড!
     • / মাথা>
     • শরীর>
     • h1> হ্যালো ওয়ার্ল্ড! < / h1>
     • div id = "contentOne">
     • p> এটি div # contentOne </p> এর কিছু লেখা
     • div>
     • p> div # contentOne </p> এর উপ-বিভাগে একটি অনুচ্ছেদ
     • / div>
     • / div>
     • / শরীর>
     • / html>
   • ডিভ> ট্যাগ ব্যবহার করে সিএসএস এবং জাভাস্ক্রিপ্টের সাথে কাজ করার সময় শৈলী খুঁজে পেতে এবং পরিবর্তন করতে সাহায্য করে। এইচটিএমএল সিএসএস শৈলী এবং জাভাস্ক্রিপ্টের সাথে কাজ করার জন্য বিভিন্ন এনকোডিং ব্যবহার করবে যাতে একটি ভাল এবং আরও প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা তৈরি হয়।

পরামর্শ

• এই নিবন্ধটি পড়ার পরে, থামবেন না এবং মনে করবেন যে আপনার যা জানা দরকার তা আপনি শিখেছেন। সবসময় কিছু শেখার আছে, বিশেষ করে এই প্রযুক্তিতে।
• কোড শিখুন, বুঝুন এবং লিখুন।
• লক্ষ্য করুন যে কিছু ট্যাগ শুধুমাত্র> ব্যবহার করে। Para এবং br কিছু উদাহরণ। > দিয়ে খোলা অন্যান্য ট্যাগগুলি আরও বন্ধ করা প্রয়োজন। যেমন, "div> </div>"।
• মানুষ নতুন আবিষ্কারের প্রত্যাশা করে, তাই নতুন করে আবিষ্কার, নকশা বা কোড।
• একবার আপনি অনেক কিছু শিখে গেলে, সার্ভার প্রোগ্রামিং শেখার চেষ্টা করুন।
• CSS এর পাশাপাশি জাভাস্ক্রিপ্ট নিয়ে কাজ করতে শিখুন।

সতর্কবাণী

• মনে রাখবেন, HTML হল বিষয়বস্তু সম্পাদনা করা। এর মানে হল যে HTML শুধুমাত্র একটি স্বীকৃত বিন্যাসে সামগ্রী সংরক্ষণ করতে ব্যবহৃত হয়। অন্যান্য পরিবর্তনগুলি অন্যান্য প্রযুক্তি ব্যবহার করে করা উচিত, যেমন CSS। এর অর্থ হচ্ছে "শব্দার্থিকভাবে সঠিক।"এমনকি অন্যরা তা স্বীকার না করলেও। অন্যান্য প্রোগ্রামিং ভাষা ওয়েব পেজ (CSS, জাভাস্ক্রিপ্ট, এবং XML) তৈরিতে সাহায্য করে। এইচটিএমএল একটি কন্টেন্ট কন্সট্রাকটর।

তোমার কি দরকার

• একটি টেক্সট এডিটর যা ANSI এনকোডিং সমর্থন করে
• একটি ওয়েব ব্রাউজার যেমন ইন্টারনেট এক্সপ্লোরার বা মজিলা ফায়ারফক্স
• (Alচ্ছিক) wysiwyg বা wykiwyg HTML সম্পাদক যেমন Adobe Dreamweaver, Aptana Studio, বা Microsoft Expression Web