HTML কী??

এটাই এখন কোটি টাকার প্রশ্ন। তাহলে দেখে নেই HTML কি।

  1. HTML হল মার্কাপ ল্যাঙ্গুয়েজ যেটা দিয়ে ওয়েব পেজ এর কাঠামো তৈরি করা হয়।
  2. HTML দিয়ে বোঝায় Hyper Text Markup Language
  3. মার্কাপ ল্যাঙ্গুয়েজ অর্থ অনেক গুলো মার্কাপ ট্যাগ এর সমষ্টি।
  4. HTML ডকুমেন্ট HTML ট্যাগ এর মাধ্যমে পরিচালিত হয়।
  5. একেকটা HTML ট্যাগ একেক ধরনের কাজ পরিচালিত করে।

আগে একটা কোড দেখে নেই।

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

এখন এই কোড টুকু আপনার ফোনে যে HTML Editor ডাউনলোড করেছেন সেখানে লিখুন এবং সেভ করুন।

যে নামে সেভ করবেন তার শেষে .html দিবেন। এখন যেখানে সেভ করেছেন সেখানে গিয়ে আপনার ব্রাউজার দিয়ে ওই ফাইলটা ওপেন করুন। ব্যাস!!

আপনার কম্পিউটার এর নোটপ্যাড ওপেন করে লিখুন এই কোড টুকু । তারপর কোথাও সেটা একটা নাম দিয়ে সেভ করুন। তবে, যে নাম দিয়ে সেভ করবেন সেটার শেষে .html দিবেন।

এবং Save as typeText Documents এর জায়গায় All files করে দিবেন। এখন যেখানে সেভ করেছেন সেখানে গিয়ে সেখুন আপনার ওই ফাইলটা রয়েছে।

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

কি দেখতে পাচ্ছেন টাইটেল বার এ লেখা Page Title. এবং পেজ এর ভেতর বড় করে লেখা My First Heading এবং তার নিচে লেখা ছোট করে My first paragraph.

HTML এর ব্যাখ্যাঃ–

এখানে প্রথমে লিখেছি <!DOCTYPE html> এটা দিয়ে আমি ব্রাউজার কে বুঝিয়ে দিলাম যে এটা একটা html ডকুমেন্ট। তারপর দিয়েছি <html> এটা দিয়ে বোঝালাম যে HTML শুরু হল।

তারপর দিয়েছি <head> এটা দিয়ে আমরা হেড ট্যাগ বুঝিয়েছি। এই <head> ট্যাগের মাঝে আমরা যা দেব তা ব্রাউজার এ দেখানোর জন্য না।

এটা দিয়ে আমরা ব্রাউজার এর টাইটেল দেখাবো, কোন ভাষার কন্টেন্ট তা লিখে দেবো, CSS বা JS ডিফাইন করে দেব ইত্যাদি ইত্যাদি।

তারপর দিয়েছি <title> এই টাইটেলের ভেতর আমরা আমাদের ওয়েব পেজের নাম দেই যা আসলে ব্রাউজারের টাইটেল বারে দেখায়।

</title> এটা হল ইন্ড ট্যাগ। আমরা এই ট্যাগের মাধ্যমে title ট্যাগ শেষ বুঝিয়েছি। এখন এই </head> হল ইন্ড ট্যাগ। এটা দিয়ে হেড ট্যাগ শেষ হল।

তারপর শুরু করলাম <body> ট্যাগ এটা দিয়ে আমরা ব্রাউজারের বডি ট্যাগ বোঝাচ্ছি। এর ভেতরে যা আছে সব ব্রাউজারে দেখাবে।

<h1> এটা দিয়ে হেডিং ডিফাইন করে দিয়েছি।

এবং <p> এটা হল প্যারাগ্রাফ ট্যাগ।

সব ট্যাগের ইন্ড বা শেষ ট্যাগ দিতে হয়।

ট্যাগ নেম লেখার নিয়ম হল <tagname>content</tagname> এই ট্যাগ নেমের ভেতর আমাদের প্রয়োজনীয় ট্যাগ নেম দিয়ে কন্টেন্ট এর জায়গায় কন্টেন্ট দিতে হবে।

নিচে HTML এর গঠন দেখে নেয়া যাক

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>

তাহলে, এতক্ষণ বুঝলেন তো মনে হয়।

এবার দ্বিতীয় অধ্যায়ঃ– HTML Editors

আমরা তো আগেই দেখিয়েছি কিভাবে কোড রান করাতে হয়। আবার নতুন করে কি দেখাবো। সুতরাং এই অধ্যায় শেষ।

এবার তৃতীয় অধ্যায়ঃ– HTML Basics

এখানে আমরা দেখাবো HTML এর ব্যাসিক ট্যাগ গুলো।

<h1> ট্যাগ

এটাকে বলে হেডিং ট্যাগ। মোট হেডিং ট্যাগ আছে ৬ টি। একেক হেডিং ট্যাগে একেক সাইজের লেখা হয়।

চলুন দেখে নেই।

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

 

এই কোডটুকু লিখে ব্রাউজারে চেক করুন। কি দেখতে পাচ্ছেন?? প্রথমে বড় করে লেখা তারপর আস্তে আস্তে ছোট হতে আছে।

এই হেডিং ট্যাগ দিয়ে আমরা ওয়েব পেজের হেডিং বোঝায়।

<p> ট্যাগ

এটাকে বলে প্যারাগ্রাফ ট্যাগ। এই ট্যাগের মাধ্যমে আমরা ওয়েব পেজের স্বাভাবিক লেখাগুলো দেখায়।

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>

</html>

<a> ট্যাগ

এটাকে বলে HTML Link ট্যাগ।

আমরা ওয়েব পেজে কোন লেখাতে যদি ক্লিক করি তাহলে নিশ্চয় দেখেছেন অন্য একটা লিংক এ চলে যায়। যেমন এই Search লেখাতে ক্লিক করুন দেখবেন আপনি গুগল সার্চ ইঞ্জিন এ চলে যাবেন। এই লিংক করার কাজ করে <a> ট্যাগ।

<!DOCTYPE html>
<html>
<body>

<a href="https://www.yahoo.com">This is a yahoo link</a>

</body>

</html>

এই কোড এর <a দিয়ে বোঝালাম যে লিংক শুরু হয়েছে। তারপরে দিয়েছি href=”https://www.yahoo.com” এটা দিয়ে আমরা বুঝিয়েছি কোন লিংক এ যাবে। তারপর, > দিয়ে লিংক শেষ করলাম।

এখন আবার লিখেছি This is yahoo link । এখানে যা লিখবো সেটার সাথে লিংক হবে। অর্থাৎ এই কোডটুকু লিখে ব্রাউজারে দেখেবেন।

একটা লেখা আছে This is yahoo link এখানে ক্লিক করলেই আপনি চলে যাবেন Yahoo এর সাইটে। শেষে আমরা ইন্ড ট্যাগ দিয়ে শেষ করে দিয়েছি। মজার না বিষয়টা??

<img> ট্যাগ

আমরা তো আর ওয়েবপেজে শুধু লেখা দেখি না ছবিও দেখতে পাই। তাহলে, চলুন দেখে নেই কিভাবে ওয়েব পেজে ছবি দিতে হয়।

ওয়েব পেজে ছবি দিতে <img> ট্যাগ ব্যবহার করা হয়। নিচে একটা উদাহরণ দেখা যাকঃ-

<!DOCTYPE html>
<html>
<body>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>

</html>

এখানে প্রথমে <img দিয়ে বুঝিয়েছি img ট্যাগ শুরু হচ্ছে।

তারপর, src=”image/w3schools.jpg” দিয়ে বুঝিয়েছি ইমেজ সোর্স বা লিংক হচ্ছে image ফোল্ডারের ভেতর w3schools.jpg নামের ইমেজ।

এখানে Image ফোল্ডার আছে সেখানে যেখানে আমাদের এই html ফাইল আছে। তারপর alt দিয়েছি কারণ কখনো যদি ইমেজ লোড না হয় বা ইমেজ না আসে তাহলে ইমেজ এর বদলে ওখানে W3Schools.com লেখা দেখাবে।

তারপর width=”104” দিয়ে বুঝিয়ে ইমেজ এর width বা প্রস্থ হবে 104 পিক্সেল এবং height=”142″ দিয়ে বলেছি যে ইমেজ এর Height বা দৈর্ঘ্য হবে ১৪২ পিক্সেল। এখানে কিন্তু, কোন ইন্ড ট্যাগ দেই নি।

কারণ, ইমেজ ট্যাগের কোন ইন্ড ট্যাগ প্রয়োজন নেই।

এবারে চতুর্থ অধ্যায়ঃ— HTML Elements

HTML এ আমরা যা কিছু লিখছি সেগুলো আসলে ইলিমেন্ট এর সমষ্টি। যেমন এখানে

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<html> এবং </html> একটা ইলিমেন্ট।

<body> এবং </body> একটা ইলিমেন্ট।

<h1> এবং </h1> একটা ইলিমেন্ট।

<p> এবং </p> একটা ইলিমেন্ট।

অর্থাৎ এখানে মোট ইলিমেন্ট আছে টি।

আরো একটা কথা। সবাই HTML এ যে ভুল টা করে তা হল ইন্ড ট্যাগ দিতে ভুলে যাওয়া। কখনো ইন্ড ট্যাগ বাদ দিবেন না।

আর, HTML এর ট্যাগ বা ইলিমেন্ট গুলো সবসময় ছোট হাতের অক্ষরে লেখার চেষ্টা করবেন।

এবারে শুরু করব ৫ অধ্যায়ঃ– HTML Attributes

এখন আগে একটা কোড দেখব।

<!DOCTYPE html>
<html>
<body>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>

</html>

এখানে <img ট্যাগের মাঝে ঐযে src, alt, width, height দেখছেন এগুলোকে বলে HTML Attribute. আমরা HTML ইলিমেন্ট এর বিভিন্ন কাজের জন্য Attribute ব্যবহার করি।

যেমন এখানে সাইজ, ইমেজ সোর্স  ঠিক রাখতে ব্যবহার করেছি।

Title Attribute

আমরা <p> বা প্যারাগ্রাফ ট্যাগের সাথে title এট্রিবিউট ব্যবহার করতে পারি।

<!DOCTYPE html>
<html>
<body>

<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

<p><b>
If you move the mouse over the paragraph above,
the title will display as a tooltip.
</b></p>

</body>

</html>

এখানে দেখুন আমরা <p> ট্যাগের সাথে title এট্রিবিউট ব্যবহার করেছি। কিন্তু, কথা হল তাতে লাভ হল কী?? একবার এই কোডটুকু ব্রাউজারে দেখুন। সাধারণ দেখাচ্ছে।

এখন আপনি ওই লেখাগুলোর উপর মাউস নিয়ে গিয়ে রেখে দেন দেখবেন কি হচ্ছে।

Href Attribute

এটার উদাহরণ তো দেই লিংক এর সময় দেখেছি। লিংক সেট করতে এই এট্রিবিউট ব্যবহৃত হয়।

Width and Height Attribute

এই এট্রিবিউট দিয়ে ইমেজ বা অন্য যেকোন কিছুর width এবং height ঠিক করে দেয়া যায়।

এরকম তো অনেক এট্রিবিউট আছে আমরা শিখতে শিখতে দেখবো। আর, ওই যখন আমরা একটা এট্রিবিউট এর ভ্যালু দেবো তখন সেটা কোটেশন এর ভেতর দিবেন।

যেমনঃ- width=”250″ এই ২৫০ হল ভ্যালু এবং এটাকে আমরা কোটেশন এর মাঝে দিয়েছি। না রাখলে সমস্যা নেই। কিন্তু, যদি টাইটেল এট্রিবিউট এর ভ্যালুতে একের অধিক ওয়ার্ড দেন তখন ভুল হবে যদি না কোটেশন দেন।

তাই, সব সময় কোটেশন এর ভেতর রাখবেন। এবং সবসময় ছোট হাতের অক্ষরে লিখবেন।

 

এখানেই শেষ করলাম “৭ দিনে শিখুন HTML” এর ১ম দিন। আজকে প্রথম তবুও অনেক কিছু শিখে ফেলেছেন।

আপনি ভাবছেন এত্ত বড় টিউটোরিয়াল কত কিছুই না আছে আসলে খুব সামান্য এখানে। আপনি ঘণ্টা সময় দিলে হয়ে যাবে।

ইনশাল্লাহ, আগামী কাল যেহেতু ২য় দিন তাই ২য় দিনের টিউটোরিয়াল পাবেন।

যাওয়ার আগে একটা এক্সারসাইজ দিয়ে দেবো। যদি, পারেন তাহলে বুঝবেন আপনি এই ১ম দিনের সব ভালো মতো বুঝেছেন।

একটা সাইট বানান যেখানে টাইটেল দিবেন My First Site। তারপর, বড় করে লেখা থাকবে Welcome!! এবং তার নিচে দিবেন Visit Trickbd এবং Trickbd তে যেন ক্লিক করলে https://trickbd.com এ যায় সেই ব্যবস্থা করবেন।

এবং তার নিচে আপনার একটা ছবি দিবেন। তৈরি হয়ে গেলে Comment এ লিখবেন Done এবং আমায় মেসেজ করে পাঠিয়ে দেবেন আপনার সাইট এর ছবি ( যেহেতু কমেন্টে ছবি দেয়া যায় না)। আমি, আপনাকে ফিডব্যাক দিবো।

 

তাহলে আজ শেষ করলাম। একটা কথা বলি কোন সমস্যা হলে সেটা কমেন্টে বলবেন তাহলে সেই সমাধান সবাই দেখতে পারবে। মেসেজ দিলে সবাইকে আলাদা আলাদা করে উত্তর দিতে হয়।

তাই, যা বলার কমেন্টে বলবেন। খুব প্রাইভেট হলে সেক্ষেত্রে মেসেজ দিতে পারবেন। আর, এক্সারসাইজ এর কথা মনে থাকে যেন।

আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন। ফেসবুকে আমি https://facebook.com/shovon.0.ahmed

আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz

42 thoughts on "৭ দিনে শিখুন HTML – ১ম দিন – পর্ব ০১"

    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
    1. Shahriar Ahmed Shovon Author Post Creator says:
      😊😊😊
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  1. Shakil Ahmmed Ovi Contributor says:
    HSC Exam er jonno khub dorkari post,continue bro?
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  2. Fazley Sabbir Contributor says:
    Awesome Bro!Carry on.
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  3. Umar Author says:
    সুন্দর হয়েছে।। চালিয়ে যান
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  4. OndhoKobi Author says:
    DOCTYPE এটা যে ছোটহাতে (doctype) লেখা যায় তা কিন্তু বলেননি। img tag এর ক্লোজিং ট্যাগ নেই ঠিক কিন্তু সেল্ফ ক্লোজিং ট্যাগ বলে একটা কথা আছে না এইরকম…..<img src=”w3schools.jpg” alt=”w3schools.com” height=”104″ width=”142″ />
    যাই হোক ধন্যবাদ।
    1. Shahriar Ahmed Shovon Author Post Creator says:
      ধন্যবাদ ভাই। ২য় পর্বে ভুল দুইটি নিয়ে আলোচনা করছি।
  5. Hasibulits Contributor says:
    ওওও ভাইই আমি তো কোডিং জিনিসটাকে খুবই ভয় পেতাম…
    কিন্তু আপনি যেভাবে বোঝালেন এখন তো মনে হচ্ছে কোডিং আসলে কিছুই না…!!
    1. Shahriar Ahmed Shovon Author Post Creator says:
      ঠিক ধরেছেন। কোডিং খুব সহজ। এগিয়ে চলুন।
  6. Arafat Shahriar Contributor says:
    assa vaiya, block-level elemem r inline element er baparta ekto bujhaiya diben, plz..
    1. Shahriar Ahmed Shovon Author Post Creator says:
      ইনশাআল্লাহ সামনে পাবেন।
  7. MohammedRuman Contributor says:
    Background e img add korar tag ta ekto bolen…
    1. Shahriar Ahmed Shovon Author Post Creator says:
      <body style="background-image:url('your image url');"
  8. Riad67 Contributor says:
    Vai Eiisob Siikhar Khub Eccca Ace…….Kintu Maje Maje Apnr Kotha Bojte Akto Problem Hoi………Kosto Kore Post er Sathe Video Thele Khub ValO Hoto………😞
    1. Shahriar Ahmed Shovon Author Post Creator says:
      বুঝতে পেরেছি ভাই। তবে, অনেকের এম্বি কিনতে গিয়ে হাতখরচের সব টাকা শেষ হয়ে যায়। তাই, যারা ফ্রিব্যাসিক্স ইউজার তাদের কথা ভেবে লিখছি। কোথায় বোঝেন নাই। বলেন প্লিজ।
  9. Bads Man Shakil Khan Author says:
    Background a img jukto korar tag oi (background) আর হা ভাই,,,,html ১ঘন্টায় কন্ঠস্ত করা যায় আর এটা সবাই জানে,,,,পারলে css,java দিন।xml ও দিতে পারেন।এগুলো বাদ দেন
    1. Shahriar Ahmed Shovon Author Post Creator says:
      কিন্তু, অনেকেই জানে না। তাই, ৭ পর্বের HTML শেখানো শেষে CSS এবং JS শেখানো হবে। ধন্যবাদ!!
  10. zX Author says:
    ভালো।।
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  11. Forhad Islam Contributor says:
    Bro apnake fb te knock diyechi….
    Plz sara diyen..r website ami already make kore felechi
    1. Shahriar Ahmed Shovon Author Post Creator says:
      সাড়া দিয়েছি ভাই।
  12. Kazi Naymur Contributor says:
    carry on bro👍👍
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Thanks
  13. MohammedRuman Contributor says:
    Vai,koi img tho jokto holona background-e…..apni ekto try kore deken…
    1. Shahriar Ahmed Shovon Author Post Creator says:
      Css এর ১ম পর্ব দেখুন
    1. Shahriar Ahmed Shovon Author Post Creator says:
      ??

Leave a Reply