«

»

HTML শিখুন HTML5 সহ [পর্ব-2] My First web Page

বিসমিল্লাহহির রাহমানের রাহীম।

আবারো আসলাম HTML নিয়ে। এর আগে HTML নিয়ে আরেকটি টুইট দিয়েছি । আপনি যদি না দেখে থাকেন তাহলে দেখে আসতে পারেনঃ

HTML শিখুন HTML5 সহ [পর্ব-1] Intro to HTML

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

প্রথমে নোট প্যাড খুলে নিচের কোড গুলো লিখুন।

<html>
<body>
<h1>Hi! Welcome to Our site (Heading)</h1>
<p>It’s  TechTweets, A new Technology Bangla Blogging platform. (Paragraph) </p>
</body>
</html>

নোট প্যাড খোলার জন্য Start>>Programs >> Accessories>> Notepad  যান। অথবা Start>>run>>notepad লিখলেই Notepad চলে আসবে।এবার নোটপেড ফাইলটির .txt Extension টা পালটিয়ে .html দিন।

যারা Extension  পালটাতে পারেন না এ অংশ টা তাদের জন্য।  যদি আপনি ফাইল রিনেম করার সময় .txt না পেয়ে থাকেন তা হলে আপনি একটি ফোল্ডার এর main menu থেকে Tools নির্বাচন করুন। এখান থেকে Folder Option খুলুন।

এবার View তে ক্লিক করে Hide The Extension for known file type   এ uncheck করে দিন। তাহলে  আপনি এবার ফাইলের Extension ফাল্টাতে পারবেন।

এবার আপনার ওয়েব ব্রাউজার দিয়ে ফাইলটি খুলুন। তাহলে নিছের মত ফলাফল দেখতে পারবেন।

Yahooooo……..

আপনি একটি ওয়েব পেজ তৈরি করতে পেরেছেন।

Congratulation!

এখানের অনেক কিছুই না বুঝে করছেন তাই না? তাহলে একটু বুঝে নি। তার জন্য নোট প্যাডে আমরা কি লিখছি তা এবার একটু ব্যাখ্যা করে নি।

এখানে প্রথমে লিখছি।  <html>, আমরা এর আগে জেনেছি যে < এবং> (বাকা ব্র্যাকেট) এর মধ্যে  HTML   Element গুলো লিখতে হয়  এবং> (বাকা ব্র্যাকেট) এর মধ্যে যা থাকে সেগুলোই হল HTML Element, আর এগুলোই হচ্ছে HTML এর প্রান। এ সকল Element ব্যবহার করে HTML পেজ বা একটি ওয়েব পেজ তৈরি করা হয়। সকল HTML Element এর দুটি অংশ থাকে। যাদের বলে HTML tag বা সংক্ষেপে tag। প্রথম টিকে বলে  Start tag ও শেষের টিকে বলে End Tag।

প্রথমে Start tag,  এটি বাকা ব্রেকেট <এবং >  বা less than  ও  greater than ( < >) চিহ্ন দিতে  এটা লিখতে হয়। এতক্ষনে আমর বুঝে গেছি যে HTML Tag জোড়ায় জোড়ায় থাকে (*Girl friend এবং Boy Friend এর মত :P)। <html> টি হচ্ছে Start tag । সুতরাং এর একটি End Tag ও থাকবে। আপনারাই বলেন Boy Friend কি  Girl friend ছাড়া থাকতে পারে? বা Girl friend কি  Boy Friend ছাড়া থাকতে পারে? না তারা যেমন থাকতে পারে না তাই HTML tag গুলো ও একে অপরকে ছাড়া থাকতে পারে না।  একেবারে শেষে দেখুন </html>   । এটি হচ্ছে End Tag । End Tag একটি /(স্ল্যাস) থাকে।    এ জন্য <html> tag  এর শেষের tag হবে </html>  । ছেলে আর মেয়ে বুঝানোর জন্য, এবার কোন টি ছেলে বা কোনটি মেয়ে হবে তা আপনারা বুঝে নেন :P।

এখন বলি <html> ও </html>    কেন লিখলাম, আমদের ওয়েব ব্রাউজারে তো <html> ও </html>  দেখায় নি? হ্যাঁ  <html> ও </html>   একটি ওয়েব পেজ প্রকাশ করে। অর্থাৎ একটি .html বা .html Extension যুক্ত ফাইলে <html> ও </html>   থাকলে আমাদের ব্রাউজার বুঝবে এটি একটি ওয়েব পেজ। এবার <html> ও </html>   এ দুটি ট্যাগ এর মধ্যে যা থাকবে তাই ব্রাউজারে প্রকাশ করবে বা দেখাবে। আমারা যে কোড গুলো লিখবো তা এ HTML Tag এর মধ্যে লিখতে হবে।

এরপর HTML Tag এর মধ্যে আরেকটি ট্যাগ লিখছি।এবার লিখছি।  <body>  Element।  এর ও রয়েছে দুটি অংশ। Start tag ও End Tag।

এটি ও একটি HTML  ট্যাগ। সুতরাং এর ও একটি End Tag  থাকবে। একটু নিচে দেখুন </body> tag টি রয়েছে।

web page এর প্রদর্শিত সকল বিষয় <body> element এর মধ্যে লিখতে হয়। এটি web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element এর মধ্যে রাখতে হবে। আমরা সাধারনত সকল সাইটের এ অংশটা ই দেখি।

এবার লিখছি

<h1>Hi! Welcome to Our site (Heading)</h1>

এটি হচ্ছে  Heading Element. এটি হচ্ছে আপনার ওয়েব পেজের হেডলাইন। কোন প্রথম Heading লিখতে <h1> Element ব্যবহার করা হয়। আমরা যদি আবোল তাবল কিছু শব্দ লিখে দি তাহলে তো ব্রাউজার বুঝবে না আমারা কি লিখছি তাকে বুঝিয়ে দিতে হবে কোনটা  কি। অর্থাৎ <h1> Element দ্বারা আমরা কোনটা হেডলাইন তা প্রকাশ করতে পারি। আপনারা তো দেখলেন  <h1> Element মধ্যের গুলো বড় করে ব্রাউজারে দেখাচ্ছে। যা নিউজ পেপারের হেডলাইনের মতই।

Tag এর ভিতরের অংশ কে বলে element content । মানে হচ্ছে start এবং end tag এর মধ্যের সব কিছুকে বলা হয় element content । এটা সকল HTML tag এর ক্ষেত্রে প্রযোজ্য।

তারপর লিখছি

<p>It’s  TechTweets, A new Technology Bangla Blogging platform. (Paragraph) </p>

এটি লিখছি  Paragraph Element এর মধ্যে ।  <p> হচ্ছে Paragraph Element। এটি হচ্ছে সাইটের প্যারগ্রাফ। কোন Paragraph লিখতে <p> Element ব্যবহার করা হয়। এর মধ্যে যা থকবে তা প্যারগ্রাফ এর মত দেখাবে, যা নিউজ পেপারের হেডলাইনের নিছের কন্টেইন নিউজ এর মত মত।

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

মাঝখান দিয়ে ফাইজলামি করার জন্য দুঃক্ষিত। মজার পাশা পাশি বুঝার সুবিধার জন্যই লিখলাম। কেউ কিছু মনে করবেন না।

পরের টুইটঃ

HTML শিখুন HTML5 সহ (পার্ট-3) HTML Element

সবাইকে ধন্যবাদ। Happy Coding!

 


এ সম্পর্কিত আরো কিছু টুইট:

নিজে নিজে Adobe photoshop শিখতে চাইলে PDF ফাইলটি ডাউনলোড করে নিন
ব্লগার টাইটেলে যুক্ত করুন দিন,তারিখ
ভ্যালেন্টাইন অফার স্বল্পমূল্যে বানিয়ে ফেলুন ফেসবুকের মত একটি সাইট
Html lesson-1: Html কি ?
ফ্রী সি প্যানেল ওয়েব হোস্টিং - লাইফটাইম
নিউজ পোর্টাল ও ম্যাগাজিনের জন্য ThemeForest এর ১২টি Premium WordPress থিম Free Download করে নিন।
কোনো প্লাগিন বা কোড ছাড়া ওয়ার্ডপ্রেসের “Howdy” লেখা পরিবর্তন করুন।সাইটের জন্য তিনজন মডারেটর দরকার

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/431

27 comments

5 pings

Skip to comment form

  1. luckyfm

    স্যার পড়া শেষ
    পরবর্তী লেকচারের অপেক্ষায় 😀

    1. ঐ ছেলেটি
      jakir

      ওকে , এবার যা শিখছেন তা ভালো ভাবে প্র্যকটিস করুন। পরের ক্লাসে দেখা হবে …

    2. luckyfm

      স্যার তাও করা শেষ
      হারি করেন

  2. Rubel Orion

    স্যার আমারো পড়া শেষ……………. 😛

    1. ঐ ছেলেটি
      jakir

      আমার ছাত্র গুলো এত ভালো, মনটা ভাল হয়ে গেল…

    2. Rubel Orion

      আপনার মন ভালো দেখে আমরাও পুলোকিত।। 😀

  3. মাজহার আহমেদ

    HTML 5 কোথায়? ধুর!!!!

    1. Shihab

      এত সহজ ভঙ্গীমায় শিখতে পেরে ভাল লাগছে। তাই চালিয়ে যান। আমরা আছি আপনার সাথে।

    2. ঐ ছেলেটি
      jakir

      মাজহার আহমেদ ভাই, ধুর বলার কারন কি একটি বলবেন?? প্লিজ

  4. ব্রাইট স্পেস

    jakir bai,apnar html alok bortikay amra sopno sarothi..ebabei hoyto ekdin sopno bastobe rup nebe.
    one question::: what is attributes in html?

    1. Rubel Orion

      ব্রাইট স্পেস ভাই, লেখা বাংলায় লিখলে বেশি ভালো লাগে। আশা করি সেই ভালো লাগাবেন।। 🙂

    2. ঐ ছেলেটি
      jakir

      attributes in html: attributes মানে হল বৈশিষ্ট। ভিবিন্ন HTML elements গুলোর রং কি হবে, দেখতে কেমন হবে এর রকম বৈশিষ্ট গুলোই হচ্ছে attribute… । প্রশ্নের জন্য অনেক ধনব্যবাদ

  5. Rakibul Hasan

    Thanks need more.

  6. Sayeam

    দাদা, একটু দ্রুত পরের পোস্টটি দিন।

    1. Rubel Orion

      আপনার সাথে সহমত….

  7. aowal

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

    1. Rubel Orion

      😛

  8. aowal

    স্যার আমি আমার হেডীং টা ্যদি ডানে,বামে,বা মাঝখানে লিখতে যাই তাহলে কি করতে হবে।

    1. ঐ ছেলেটি
      jakir

      align=”right” left,center,right,justify যেকোনটি ব্যবহার করুন। আর এটি ব্যবহার করুন h1 এর সাথে। < ও> এর ভিতরে

  9. aowal

    আরেক টা প্রশ্ন যদি রাগ না করেন, আমি আমার হেডলাইনের লিখা গুলোকে আমার মন মত বড়,ছোট,ইটালিক,বোল্ড করবো।এই ঊওর গুলো পেলে আগামী পর্বের প্রত্যাশায় রইলাম।

    1. ঐ ছেলেটি
      jakir

      আপনি যেখান থেকে আপনার লেখা ইটালিক করবেন তার আগে < ও > এর ভতর i দিন। এবং যেখান পর্যন্ত আপনি ইতালিক করতে চান সেখানে এই i ট্যাগটি শেষ করুন। তাহলেই আপনার লেখা ইটালিক হবে। একই ভাবে বোল্ড করার জন্য b বড় করার জন্য big ট্যাগ গুলো ব্যবহার করুন। আর সমস্যা হলে অবশ্যই জানাবেন।
      এখানে দেখুন এরা কিভাবে লিখছে তাহলে আরো সুবিধা হবে।

  10. aowal

    জাকির ভাই হুম এখন পারি।সামনের পর্ব অপেক্ষায় থাকলাম।

    1. ঐ ছেলেটি
      jakir

      গিয়ে দেখুন কত পর্ব দেওয়া হয়ে গেছে

  11. foolish pritom

    apnar kache dine dine reenee hoye jacchi……i m greatful,,,

    1. ঐ ছেলেটি
      jakir

      ঋনী হওয়ার কিছুই নেই। আপনি শিখতে পারলেই আমি খুশি।

  12. sayedalihasan

    2য় পর্ব দিয়ে কয়েক বার প্র্যক্টিস করলাম প্রথমে কয়েকবার হয়নি। বুঝলাম না। তার পর দেখি এর পর স্পেস দিয়েছিলাম।
    আমি যা দেখি আপনি যে ভাবে দিয়েছেন তার চুল পরিমান ভুল হলে তার হয় না। তাই ভাল ভাবে প্র্যক্টিস করতে হবে মনে হয়।

    1. ঐ ছেলেটি
      jakir

      ট্যাগ গুলো না পরিবর্তন করে আপনি ট্রাই করুন তাহলেই পারবেন।

  1. HTML শিখুন HTML5 সহ (পর্ব-6) » টেকটুইটস

    […] HTML শিখুন HTML5 সহ (পার্ট-২) My First web Page […]

মন্তব্য করুন