BD Skills
  • ডিজিটাল স্কিল
    • এসইও (SEO)
    • ওয়েব ডেভেলপমেন্ট
    • প্রোগ্রামিং
    • মাইক্রোসফট অফিস
      • মাইক্রোসফট এক্সেল
      • মাইক্রোসফট ওয়ার্ড
      • মাইক্রোসফট পাওয়ারপয়েন্ট
  • ফ্রি পেইড কোর্স
  • ফ্রি PDF বই
  • চাকরির বিজ্ঞপ্তি
    • প্রাইভেট চাকরি
    • সরকারী চাকরী
  • অনলাইন ইনকাম
  • আরও ক্যাটেগরি
    • ইউটিউব গাইড
    • টিপস & হ্যাকস
    • প্রযুক্তি কথা
    • বিজ্ঞান ও প্রযুক্তি
    • ব্যবসা
    • ব্লগিং
    • লাইফস্টাইল
    • সোশ্যাল মিডিয়া
No Result
View All Result
  • ডিজিটাল স্কিল
    • এসইও (SEO)
    • ওয়েব ডেভেলপমেন্ট
    • প্রোগ্রামিং
    • মাইক্রোসফট অফিস
      • মাইক্রোসফট এক্সেল
      • মাইক্রোসফট ওয়ার্ড
      • মাইক্রোসফট পাওয়ারপয়েন্ট
  • ফ্রি পেইড কোর্স
  • ফ্রি PDF বই
  • চাকরির বিজ্ঞপ্তি
    • প্রাইভেট চাকরি
    • সরকারী চাকরী
  • অনলাইন ইনকাম
  • আরও ক্যাটেগরি
    • ইউটিউব গাইড
    • টিপস & হ্যাকস
    • প্রযুক্তি কথা
    • বিজ্ঞান ও প্রযুক্তি
    • ব্যবসা
    • ব্লগিং
    • লাইফস্টাইল
    • সোশ্যাল মিডিয়া
No Result
View All Result
BD Skills
No Result
View All Result

HTML Tutorial in Bangla – HTML বাংলা টিউটোরিয়াল।

January 19, 2022
in ওয়েব ডেভেলপমেন্ট, ডিজিটাল স্কিল
0
1.2k
SHARES
3.2k
VIEWS
Share on FacebookShare on Twitter

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

HTML Tutorial in Bangla : HTML কি?

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা দিয়ে আপনি যেকোনো তথ্য, ছবি এমনকি ভিডিওকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ পাবেন। আর এই কাজটি করতে হলে আপনাকে একটা ওয়েব পেজ তৈরী করতে হবে। আর একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়েই । HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

HTML এর ইতিহাস

মার্কিন কম্পিউটার সায়েন্টিস্ট টিম বার্নাস-লী প্রথম HTML বা Hyper Text Mark Up Language টি তৈরি করেন। এটি তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। তারপর ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে W3C কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে W3C HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

HTML Code কোথায় এবং কিভাবে লিখবেন?

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা Code Editor ব্যবহার করে কোডিং করতে হয়। HTML কোডিংয়ের জন্য আপনি প্রফেশনাল টেক্সট এডিটর যেমন- Sublime Text, atom.io, Brackets ইত্যাদি ব্যবহার করতে পারেন। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html বা test.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখতে পারবেন।

HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>www.w3programmers.com</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: test.html , Save as type : All files, দিয়ে save করে test.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

html demo

html demo

HTML শিখতে কি জানা দরকার?

HTML শিখতে নিচের শব্দগুলি ভালভাবে জানা দরকার-

  • HTML Element
  • HTML Tag
  • HTML Attribute

চলুন একটা একটা করে উপরের তিনটি বিষয়ে একটা পরিষ্কার ধারণা নেই।

HTML Tutorial in Bangla – HTML ট্যাগ কি?

HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Pre-defined Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা এক একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।

HTML Element কি?

HTML এ যেকোন শুরু ও শেষ tag এবং মাঝের অংশকে সংশ্লিষ্ট tag এর Element বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার 1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই This is an example of element.হচ্ছে h1 tag এর element । কিছু কিছু ট্যাগের কোন Element থাকে না যেমন <br /> <img /> ইত্যাদি।
সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়। আর এগুলোকে বলা হয় HTML empty Element

HTML Attributes কি?

HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য শুরু tag এর মধ্যে কিছু pre-defined কথাকে HTML Attribute বলে। মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য Attributes ব্যবহার করা হয়। যেমন <font size=”5″ face=”Tahoma” color=”red”> Hello w3programmers.<font/> এখানে size=”5″ অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির সাইজ কেমন হবে। এছাড়া face=”Tahoma” প্রকাশ করছে লেখাটির font হবে Tahoma এবং color=”red” দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

HTML Entities কি?

HTML এ কিছু বিশেষ Character যেমন <,> চিহ্ন এটি সাধারণত HTML tag গুলো লেখার কাজে ব্যবহৃত হয় , তাই এগুলোর মধ্যে কিছু লিখলে browser সেটিকে ট্যাগ ভেবে ভুল করে বা আমাদের ইচ্ছা অনুযায়ী সঠিক ভাবে তথ্য প্রদর্শন করতে পারেনা। আবার এমন কিছু চিহ্ন যেমন © ® ™ $ ইত্যাদি চিহ্ন গুলি এডিটরে লেখার জন্য আপনার কীবোর্ড এ লেখার ব্যবস্থা নেই । এখন যদি এই ধরনের কোন চিহ্ন আপনি ওয়েব পেজে দেখাতে চান তাহলে এইচটিএমএল এনটাইটি ব্যবহার করে দেখাতে পারবেন।
প্রত্যেক এনটাইটি এমপারসেন্ড (&) চিহ্ন দিয়ে শুরু হয় এরপর তার নাম এবং শেষে সেমিকোলন (;) দিয়ে শেষ করতে হয়।
Entity নাম দিয়েও প্রকাশ করা যায় আবার বিকল্প হিসেবে প্রত্যেকটি এনটাইটির একটা নাম্বার আছে সেটা দিয়েও প্রকাশ করতে পারেন। নিচের কিছু নামভিত্তিক এনটাইটি দেয়া হল।
কয়েকটি বহুল ব্যবহৃত এনটাইটি:

1
2
3
4
5
6
7
&copy;
&reg;
&trade;
&nbsp;
&dollar;
&lt;
&gt;

এগুলির নাম্বার যথাক্রমে

1
2
3
4
5
6
7
&#169;
&#174;
&#8482;
&#32;
&#36;
&#60;
&#62;

Result

common html entity

common html entity

HTML DOCTYPE Tag কি?

HTML এ <!DOCTYPE> Tag হচ্ছে আপনার লেখা HTML ডকুমেন্টটি কি ধরনের তা ব্রাউজারকে বোঝানোর জন্য ব্যবহৃত হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট, তাই এটাকে আমরা এভাবে <!DOCTYPE html> লিখি । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে:

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

আপনার জন্য আরও – 

ওয়েব ডিজাইন ও ডেভেলপমেন্ট বাংলা পেইড কোর্স ফ্রি – Download Now

HTML Comments কি ?

HTML এ Comments হচ্ছে, একজন HTML কোডার বা প্রোগ্রামারের সোর্স কোডের ব্যাখ্যা বা পাদটীকা। এটাকে আমরা Coding Documentation ও বলতে পারি। সাধারণত: যেকোনো Programming language এর Compiler এবং Interpretor গুলো comments কে কোড হিসাবে execute না করে এটাকে (Ignore) এড়িয়ে যায়। Comments System দিয়ে আমরা HTML এর Coding Documentation ছাড়াও এই মুহূর্তে ব্যবহৃত হবেনা কিন্তু ভবিষ্যতে কাজে লাগতে পারে এমন HTML Code গুলোও আমরা সাময়িক সময়ের জন্য hide করে রাখতে পারি।

HTML এ কিভাবে Comment করা হয়?

HTML এ start tag দিয়ে comment এর কাজ করা হয়। নিচের উদাহরণ দেখুন:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>HTML Comment</title>
</head>
<body>
    <!--This is a paragraph-->
    <p>Hello HTML!</p>
</body>
</html>

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

Condition Comment :

যেসকল ট্যাগ ইন্টারনেট এক্সপ্লোরার ব্রাউজারে সাপোর্ট করেনা, সেসকল ট্যাগের বিকল্প হিসেবে কমেন্টের মধ্যে ট্যাগ নির্ধারণ করে দিতে পারেন। এতে করে যখন এই কোডগুলো ইন্টারনেট এক্সপ্লোরার ব্রাউজারে রান হবে তখন কমেন্টের মধ্যের ট্যাগগুলো সঠিকভাবে প্রদর্শিত হবে। নিচের উদাহরণটি দেখুন:

1
2
3
<!--[if IE 8]>
HTML Tag
<![endif]-->
1
2
3
<!--[if lt IE 9]>
<script src="/media/jui/js/html5.js"></script>
 <![endif]-->
পোস্ট ক্রেডিট - w3programmers.com

Related Posts

ডিজিটাল মার্কেটিং কি এবং কেন? ডিজিটাল মার্কেটিং শেখার উপায়।
ডিজিটাল স্কিল

ডিজিটাল মার্কেটিং কি এবং কেন? ডিজিটাল মার্কেটিং শেখার উপায়।

ডাটা এন্ট্রি কি? ডাটা এন্ট্রি কোর্স। ডাটা এন্ট্রি শেখার উপায়, ডাটা এন্ট্রি জব
ডিজিটাল স্কিল

ডাটা এন্ট্রি কি? ডাটা এন্ট্রি কোর্স। ডাটা এন্ট্রি শেখার উপায়, ডাটা এন্ট্রি জব

ফেসবুক নিয়ে এলো অ্যানালিটিক্স মার্কেটিং সার্টিফিকেট প্রোগ্রাম!!
ডিজিটাল স্কিল

ফেসবুক নিয়ে এলো অ্যানালিটিক্স মার্কেটিং সার্টিফিকেট প্রোগ্রাম!!

বেসিক কম্পিউটার শিখুন মোবাইল অ্যাপের মাধ্যমে।
ডিজিটাল স্কিল

বেসিক কম্পিউটার শিখুন মোবাইল অ্যাপের মাধ্যমে।

Microsoft Excel – মাইক্রোসফট এক্সেল। টিউটোরিয়াল – পর্ব – ১২
ডিজিটাল স্কিল

Microsoft Excel – মাইক্রোসফট এক্সেল। টিউটোরিয়াল – পর্ব – ১৮ ( শেষ পর্ব)

Microsoft Excel – মাইক্রোসফট এক্সেল। টিউটোরিয়াল – পর্ব – ১৭
ডিজিটাল স্কিল

Microsoft Excel – মাইক্রোসফট এক্সেল। টিউটোরিয়াল – পর্ব – ১৭

Next Post
[🔥Free Paid Course🔥] ৩৭টি Paid Course একদম ফ্রি। এখনি নিয়ে নিন।

[🔥Free Paid Course🔥] ৩৭টি Paid Course একদম ফ্রি। এখনি নিয়ে নিন।

  • About
  • Advertise
  • Careers
  • Contact

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • ডিজিটাল স্কিল
    • এসইও (SEO)
    • ওয়েব ডেভেলপমেন্ট
    • প্রোগ্রামিং
    • মাইক্রোসফট অফিস
      • মাইক্রোসফট এক্সেল
      • মাইক্রোসফট ওয়ার্ড
      • মাইক্রোসফট পাওয়ারপয়েন্ট
  • ফ্রি পেইড কোর্স
  • ফ্রি PDF বই
  • চাকরির বিজ্ঞপ্তি
    • প্রাইভেট চাকরি
    • সরকারী চাকরী
  • অনলাইন ইনকাম
  • আরও ক্যাটেগরি
    • ইউটিউব গাইড
    • টিপস & হ্যাকস
    • প্রযুক্তি কথা
    • বিজ্ঞান ও প্রযুক্তি
    • ব্যবসা
    • ব্লগিং
    • লাইফস্টাইল
    • সোশ্যাল মিডিয়া

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.