HTML শেখা। তৃতীয় পর্ব। #HTML

Sun May 27, 2018 8:37 pm

স্বাগতম প্রিয় মিনিল্যাব মেম্বার ও অতিথিরা। আমি আপনাদের শুরুতেই রিকোয়েস্ট করব আমাদের ফোরামে সাইন আপ করতে, এটি ফ্রি ও খুব সোজা। আপনি সাইনাপ করার পর ফোরামে রিপ্লাই, টপিক পোস্ট করা সহ আরো অনেক কিছু করতে পারবেন।
যাই হোক, আজকের পর্ব নম্বর ৩, এবং এই পর্বে আমি লিখছি মাহাবুব হাসান। নিচে দিয়ে দিচ্ছি গুরুত্বপূর্ন কিছু লিংক এবং শুরু করছি আজকের পর্ব।

লিংকসঃ

* প্রথম পর্ব
* ফেইসবুক গ্রুপ
* লাইভ চ্যাটের জন্যে পাশে ম্যাসেজ বা নিড হেল্প বাটনে প্রেস করুন। আমি আছি সকাল ১০ টা থেকে রাত ১০ টা।

কালকে যা যা শিখলামঃ
* এইচটিএমএল পরিচিতি, * সেটাপ ও পরিবেশ, * প্রথম এইচটিএমএল প্রোগ্রাম তৈরী, * ট্যাগ, এট্রিবিউট ও ভ্যালু

আজকে যা যা শিখবোঃ

১। এইচটিএমএল এর হেড ও বডি

২। হেডিং ও প্যারাগ্রাফ

৩। কোড লেখাঃ আমার পরিচয়

৪। এইচটিএমএল লেখার সময় ত্রুটি ও এর সমাধান

সেকশন ঃ ১

এইচটিএমএল হেড ও বডি

এইচটিএমএল এর দুইটি অংশ আছে তা আমরা কাল জেনেছি। আজ এদের ব্যাবহার শিখবো। হেড হলো <head> </head> এর মাঝে সকল এলিমেন্ট (এলিমেন্ট = বস্তু) । এবং বডি হলো <body> </body> এর মাঝে সকল এলিমেন্ট।

আমরা সকল এইচটিএমএল পেইজ লেখা শুরু করব <html> দিয়ে। ও সবশেষে </html> দিয়ে শেষ করব। এর মাঝে আবার দুইটি ভাগ থাকবে, একটা ভাগ হলো হেড (<head> </head>) ও আরেকটি অংশ বডি (<body> </body>).

<html>

<head>

<title> Hello its a page title </title>

</head>

<body>

<h1> Hello world </h1>

<p> Im from MiniLab </p>

</body>

</html>

রেজাল্টঃ

কোডটি লক্ষ্য করুন। উক্ত কোডটি রান করার পর ট্যাবের উপর টাইটেলটি (Hello Its a page title) খেয়াল করুন। এটি শুধু হেডে কাজ করে। এটি ব্রাউজারের বডিতে কাজ করে না।

আবার Hello world ও im from minilab লেখায় ব্যাবহৃত কোডটি বডিতে লেখা ছাড়া কাজ করবে না। অতএব বডির ভেতর আপনার ডকুমেন্টের সম্পূর্ন অংশ লেখবেন ও হেডে টাইটেল ও প্রয়োজনীয় কিছু কোড লিখবেন।

সেকশন ঃ ২

হেডিং ও প্যারাগ্রাফ (<h1> and <p> tags)

অতএব আমরা শিখে গেলাম কোন অংশে কোন ধরনের কোড লিখতে হয়। এখন আমরা শিরোনাম ও অনুচ্ছেদ লেখার ট্যাগ শিখবো। শিরোনাম বড় আকারের লেখা যা ওই পেইজের বিষয়, গুরুত্ব পূর্ন পয়েন্ট নির্দেশ করার জন্য ব্যাবহার করা হয়। পত্রিকা বা খবরের কাগজে আমরা দেখতে পাই এর ব্যাবহার। মূল খবর এক লাইনে বড় আকারে লেখা থাকে শিরোনাম হিসেবে।

এইচটিএমএল এ শিরোনাম লিখতে আমরা <h1> </h1> ট্যাগ ব্যাবহার করি। তবে শিরোনাম ট্যাগ একটি নয়! এর আকার অনুযায়ী ৬ টা ট্যাগ আছে যা যথাক্রমে <h1> থেকে <h6> পর্যন্ত। নিচে এর সকল ট্যাগ দেখানো হলো

<html>
<head>
<title> All heading tag </title>
<body>
<h1> This one is biggest </h1>
<h2> This one is smaller</h2>
<h3> This one is smallest</h3>
<h4> This one is mini</h4>
<h5> This one is miniest</h5>
<h6> This one is the tiniest</h6>
</body>
</html>

রেজাল্টঃ

এই কোডটিতে সকল হেডিং ট্যাগ এর কোড ও সাইজ এর তূলনা দেখানো হয়েছে। আমরা সচরাচর শিরোনাম এর ক্ষেত্রে এর প্রথম তিনটি বেশী ব্যাবহার করতে দেখি। বাকিগুলি কদাচিৎ ব্যাবহৃত হয়।

আমরা এখন শিখলাম শিরোনাম লেখা। এখন আমরা শিখবো কিভাবে অনুচ্ছেদ লিখতে হয়। অনুচ্ছেদ লিখতে আমরা <p> ট্যাগ ব্যাবহার করি।
খবরের কাগজে দেখলে আমরা দেখবো বড় আকারের শিরোনামের পর মূল খবর ছোট আকারে লেখা হয়। এই ছোট আকারের লেখাগুলিই অনুচ্ছেদ। আমরা একটি কোড দেখি

<html>
<head>
<title> Writing paragraph </title>
<body>
<h1> Some truth you need to know </h1>
<p> Black people are not only rappers, drug dealers, man eaters or bad looking. They are just like us.
They are human
</p>
<p> Hindu, Shikh, Muslim, Christians, Buddhists are all same human. We have to love each other. </p>
<p> Muslims are not terrorists. Only 0.00006% of muslim supports violence. We love you all. </p>
<p> Dont hate poor and under previlleged people. Money isnt a thing to compare. They are just like you! </p>
</body>
</html>

রেজাল্টঃ

এই কোডে আমরা দেখতে পেলাম একটি শিরোনাম ও চারটি অনুচ্ছেদ বা প্যারাগ্রাফ। আপনারা যত খুশি অনুচ্ছেদ তৈরী করতে পারবেন।

নিজে চেষ্টা করুনঃ একটি অনুচ্ছেদ লিখুন শিরোনাম ও অনুচ্ছেদ ট্যাগ ব্যাবহার করে।যে কোন ভাষায়। বিষয়ঃ ধুমপানে বিষপান। এর ক্ষতি ও প্রতিকার।

আমরা শিখে গেলাম কিভাবে অনুচ্ছেদ লিখা হয়।

সেকশন ঃ ৩

কোড প্র্যাক্টিস। আমার পরিচয়।

আমরা আগের সেকশনে শিখেছি শিরোনাম ট্যাগ ও অনুচ্ছেদ ট্যাগ। শিরোনাম ট্যাগের আকার ও অনুচ্ছেদ ট্যাগের ব্যাবহার। আমরা এর দ্বারা একটি সুন্দর তথ্য সমৃদ্ধ ওয়েবপেইজ তৈরী করতে পারবো। এটি অতটা ভালো হবে না, তবুও মনে রাখবেন অনেক কিছু শেখা এখনো বাকি। অতএবঃ আমরা আজকে এই অধ্যায় থেকে শেখা কোড এর মাধ্যমে আজ নিজের পরিচয় এইচটিএমএল ব্যাবহার করে লিখবো।

আমি আমার লেখা একটি ওয়েবপেইজ এর স্নিপেট (কোড) দিচ্ছি। এতে আমি আমার পরিচয় তুলে ধরেছি।

<html>
<head>
<title> Writing about myself </title>
<body>
<h1> About Myself </h1>
<p> Hello minilab members. Im Mahabub Hasan. Im 17 years old and i have my own store in pubail, gazipur. </p>
<p> I opened this shop in january and i have a big plan to make it bigger. But i have another dream. I learned Web development and i wanna make a huge project to teach others web designing and graphics designing. </p>
<p> I wanna teach every one web design in pure bengali because its hard for us to learn these from international sources like w3schools or sololearn. Because of most of us have less comfort reading and understanding english. After all its a foreign language. </p>
<p> So i started to make my dream come true and i started writing in this forum. I want you guys to learn aat ease. Happy learning! </p>
</body>
</html>

রেজাল্টঃ

এবার আপনারা চেষ্টা করুন ও নিচে আমাকে দিন। সবচেয়ে সুন্দর ও ইনফর্মেটিভ স্ক্রিনশট এর জন্যে আপনাকে পুরষ্ক্রিত করা হবে।

সেকশনঃ ৪

এইচটিএমএল লেখার সময় ত্রুটি ও সমাধান

এইচটিএমএল রান করলে আমরা লেখা কোডের রেজাল্ট দেখতে পাই। কিন্তু কোডে কোন প্রকার ত্রুটি থাকলে তার রেজাল্ট উল্টাপাল্টা বা ভুল আসে। অথবা রেজাল্ট আসেই না। তাই আমরা জেনে নেই সম্ভাব্য ত্রুটি ও এর সমাধান।

* কোড রান হচ্ছে না

কোডগুলির ট্যাগ পরিক্ষা করুন। মূল ট্যাগ, হেড বা বডি ট্যাগ ঠিক আছে কিনা, ক্লোজিং ট্যাগ ঠিক ভাবে দিয়েছেন কিনা। তারপরেও যদি সমস্যা থেকে যায় তাহলে আমাদের গ্রুপে সমস্যা পোস্ট করুন

* কোড রান করলে শুধু কোডই দেখায় রেজাল্ট দেখায় না

আপনার এইচটিএমএল ফাইলটির শেষে .html এক্সটেনশন আছে কিনা। যদি .html না থেকে .txt থাকে তাহলে তা রিনেম করে .html করে দিন।

* কোড এর টাইটেল দেখা যাচ্ছে কিন্তু বাকি সব সাদা

বডি ট্যাগ ঠিক মতো ঠিক জায়গায় বসিয়েছেন কিনা লক্ষ্য করুন।

এছাড়াও আরো সমস্যা ও সমাধানের জন্যে আমাদের লাইভ চ্যাটে আসুন।

বিদায় নোট

ধন্যবাদ আমাদের আর্টিকেল পড়ার জন্যে। কালকের পর্বে আমরা আরো অনেক কিছু শিখবো। কালকে আমরা যা যা শিখবোঃ

১। ডকুমেন্ট ফর্মেটিং বা সাজসজ্জা।

২। এইচটিএমএল কমেন্ট বা মন্তব্য।

৩। এইচটিএমএল এংকর ট্যাগ ও লিংক।

৪। এইচটিএমএল লাইন ব্রেক ও হরিজন্টাল লাইন।

আজকের মতো এই পর্যন্ত কাল আবার দেখা হবে মিনিল্যাবে। আবারো ধন্যবাদ। ও শুভ বিদায়। Smile