Skip to main content

Command Palette

Search for a command to run...

HTML কি , HTML Structure এবং জনপ্রিয় Tag সমূহ Part-02

Updated
4 min read
HTML কি , HTML  Structure এবং জনপ্রিয় Tag সমূহ  Part-02

Previous Part Link:

https://blog.shikhun.net/html-html-structure-tag-part-01
HTML structure বা গঠনঃ

আমরা ওপরে ওয়েবসাইট এবং HTML সম্পর্কে বিস্তারিত জেনেছি, আমরা যদি ওয়েবসাইটে কা মানবদেহ এবং HTML কে কঙ্কাল হিসেবে বিবেচনা করে তাহলে বিষয়টি ভালো ভাবো ভাবে বুঝতে পারবো।কঙ্কাল ছাড়া আমরা মানবদেহ ক্লপনাও করতে পারবো নাহ, মানবদেহ গটনে যেমন কঙ্কাল ভূমিকা পালন করে তেমনি ভাবে ওয়েবসাইটে গটনে HTML

আর আমদের মানব দেহের structure বা গটনের সাথে HTML structure কে তুলনা করতে পারি,

HTML ফাইল এর গঠনঃ

HTML এ লিখিত প্রােগ্রামকে দুটি সেকশন বা অংশে ভাগ করা যায়।

যেমনঃ

১. হেড সেকশন (Head Section) ও

২. বডি সেকশন (Body Section)

হেড সেকশনঃ

<head> ট্যাগের মাধ্যমে হেড সেকশনের শুরু নির্দেশ করে। <head>...</head> এই ট্যাগের মধ্যে <title> <link> <meta> <style> এবং <script> এর মতাে গুরুত্বপূর্ণ ট্যাগগুলাে রাখা হয়। এই ট্যাগগুলির মাধ্যমে ব্রাউজারে ওয়েব পেইজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শনের পাশাপাশি সার্চ ইজ্ঞিন অপটিমাইজেশনের কাজ করা যায়।

বডি সেকশনঃ

<body> ট্যাগের মাধ্যমে বডি সেকশনের শুরু নির্দেশ করে। <body>... </body> এই ট্যাগের মধ্যবর্তী বিষয়গুলাে ব্রাউজারের উইন্ডােতে প্রদর্শিত হয়।

HTML file শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> ট্যাগ দিয়ে। একটি HTML file এর সাধারণ গঠন বা basic structure নিম্নরূপ

এইচটিএমএল ট্যাগ কি ? (HTML Tag)

HTML tag মানে হলো,

একটি ওয়েবপেজে লুকিয়ে থাকা এমন কিছু keywords, যেগুলো আপনার ওয়েবপেজে থাকা কনটেন্ট গুলো কিভাবে ওয়েব ব্রাউজারে ডিসপ্লে (display) করা হবে, সেটা নির্ধারিত বা সেট (set) করে।Web page এর ক্ষেত্রে একটি উপযুক্ত HTML command তৈরি করার জন্যে ব্যবহার করা “set of characters” গুলোকেই HTML tag বলা হয়।এইচটিএমএল ট্যাগ গুলোকে দুধরণে ব্যবহার করা হয়।

Opening HTML Tag

Closing HTML Tag

একটি HTML command বা instruction সম্পূর্ণ কাজ করার জন্যে, opening HTML Tag এর সাথে সাথে Closing HTML Tag ব্যবহার করাটা জরুরি।

উদাহরণ স্বরূপে, ধরুন, একটি ওয়েবপেজে থাকা কিছু অংশ “text” আমরা “italic” হিসেবে ব্যবহার করতে চাচ্ছি।এই ক্ষেত্রে, আমাদের ব্যবহার করতে হবে।

<i> the text witch you want as heading </i>

এখন, ওপরে লেখা বাক্য গুলো আমরা একটি সম্পূর্ণ HTML Tag এর ভেতরে লিখেছি যেখানে,

<i> – হলো opening tag.

</i> – হলো closing tag.

এভাবেই, একটি সম্পূর্ণ HTML tag command কাজ করার জন্যে, opening এবং closing tag এর ব্যবহার জরুরি।

যেগুলো HTML Tags গুলোকে ওপেন করা হয়, সেগুলোকে close করাও জরুরি।

বিভিন্ন ধরণের আলাদা আলাদা webpages বা web document তৈরি করার ক্ষেত্রে আলাদা আলাদা “HTML Tags” ব্যবহার করা হয়।

তাহলে বুঝলেন তো, “html tag কি” ?

HTML Most পপুলার ট্যাগ সমূহ:

HTML p ট্যাগ ও p ট্যাগের ব্যবহার:

সাধারণত HTML p ট্যাগ কোন সাইটে লেখা প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়ে থাকে। p tag আসলে paragraph represent করে । যেমন অনেক সাইটে কন্টেন কিংবা আর্টিকেল লেখা দেখা যায়। সেইগুলোতে সাধারণত p ট্যাগ ব্যবহার করে করা হয় । প্রতিটি p এলিমেন্টের আগে এবং পরে কিছু স্থানে (margin) যুক্ত করা থাকে যার ফরে এক প্যারাগ্রাফ থেকে অন্য প্যারাগ্রাফ এর মাঝে কিছুটা ফাকা জায়গা তৈরি হয়। তো চলুন নিচের অংশে দেখে নেওয়া যাক।

<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Maiores, consequatur.</p>

p tag একটি ব্লক লেভেল এলিমেন্ট যা সাধারানত নতুন নতুন লাইন তৈরি করে আসে । HTML5 এ p ট্যাগ বেশির ভাগ সময় এর ভিতরে ব্যবহার করা হয়ে থাকে একটি আর্টিকেলের বিভিন্য প্যারাগ্রাফ গুলো করার জন্য ।

HTML হেডলাইন (HTML Heading Tag) ও ব্যবহার :

Heading বলতে হেডলাইন বা শিরোনাম বুঝানো হয়। পত্রিকায় একটা খবর লিখার আগে খবরটির মুল বিষয় বস্তু বুঝানোর জন্য বড় অক্ষরে একটি শিরোনাম দেওয়া হয়, টেলিভিশন, বই পুস্তক, কিংবা ওয়েবসাইট। সবখানে যে লেখা গুলি সবার আগে নজরে পড়ে সেটা হল শিরোনাম। এই শিরোনামকে এইচটিএমএল এর ভাষায় Headings হেডিং বলা হয়। এইচটিএমএল এ শিরোনামকে <h1> থেকে <h6> পর্যন্ত ছয় ভাগে ভাগ করা হয়েছে। <h1> ট্যাগের অক্ষরগুলো বড় এবং <h2>, <h3>, <h4>, <h5> এবং <h6> পর্যন্ত অক্ষরগুলো যথাক্রমে ছোট হয়ে আসে।

<h1>This Is hl Heading.</h1>
<h2>This Is h2 Heading.</h2>
<h3>This Is h3 Heading.</h3>
<h4>This Is h4 Heading.</h4>
<h5>This Is h5 Heading.</h6>
<h1>This Is h6 Heading.</h6>

চলুন আমরা আরো কিছু বিষয় জেনে নেই এখন বলুন তো HTML এর ব্যবহার কোথায় করা হয় ?

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

“Html এর ব্যবহার ওয়েবসাইট, ওয়েবপেজ বা ওয়েব ডকুমেন্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয়”.তাই তো ?তবে, HTML কেবল webpage তৈরি করার জন্যই ব্যবহার করা হয়না।আরো অনেক ধরণের কাজেও HTML এর ব্যবহার হয়ে থাকে।

যেমন,

Internet navigation

Web document Creation

Game development

Web page development

Responsive design

এগুলো হলো html এর কিছু ব্যবহার।

এইচটিএমএল (HTML) হলো এক “platform independent language“.

মানে, Windows, Linux বা Macintosh যেকোনো platform থেকেই এর ব্যবহার করা যেতে পারে।
HTML কিভাবে শিখব ?

নিচে দেওয়া মাধ্যম গুলো ব্যবহার করে, এইচটিএমএল শেখতে পারবেন।

https://www.w3schools.com/

https://html.com/

আজকে আমরা কি শিখলাম ?

আজকে আমরা শিখলাম ওয়েবসাইট কি HTML কি HTML গটন HTML tag ইত্যাদি।

একটি ব্লগে সম্পূর্ণটা বলে দেওয়া সম্ভব না ভালো ভাবে হাতে কলমে শিখতে চাইলে https://youtu.be/Cqvzn_OVTWo এই ভিডিও টি দেখে আসতে পারেন। আর হ্যা ভিডিও টি দেখার পাশা পাশি অবশ্যই প্রাকটিস করতে হবে।আর্টিকেলের সাথে জড়িত কোনো সমস্যা বা পরামর্শ থাকলে, নিচে কমেন্ট করে জানিয়ে দিতে পারেন।আর্টিকেলটি ভালো লেগে থাকলে শেয়ার (share) করতে পারেন

ধ্যনবাদ।

More from this blog

We discuss basic routing

বেসিক রাউটিং সফটওয়্যার আর্কিটেকচারে রাউট হচ্ছে মৌলিক উপাদান(Basic Component). রাউট URL(URL = Uniform Resource Locator) থেকে অনুরোধ গ্রহণ করে এবং এপ্লিকেশনকে রিসোর্সের জন্য নির্দেশনা প্রদান করে। লারাভেলের রাউট সমূহ একই সাথে সুবিন্যস্ত করে রাখার জন্য r...

Jun 1, 20233 min read

Visual Studio Code এডিটর কি-বোর্ড শর্টকার্ট

এখন কোডিংয়ের স্পীড হবে রকেটের গতি যদি আপনি ব্লগটি পড়েন এবং শর্টকাট ব্যবহার করেন তাহলে চলুন শুরু করি। Visual Studio Code এডিটর কি-বোর্ড শর্টকার্টঃ MAC ও WINDOWS এর জন্য আলাদা কি-বোর্ড শর্টকাট নিচে দেওয়া হল- Visual Studio Code এর কমান্ড পেলেট কিভাবে ওপ...

Jun 1, 20233 min read
Visual Studio Code এডিটর কি-বোর্ড শর্টকার্ট

WordPress Support Engineer Input Field And Form

আজকে আমরা আলোচনা করব আমাদের WordPress Support Engineer Course এর ক্লাস ২ নিয়ে এবং আমাদের টপিক হলো html input fields. ইনপুট ফিল্ডে বিভিন্ন রকম টাইপ রয়েছে এর মধ্যে default html,html-5,iput type="text" ইত্যাদি। তো চলুন শুরু করি ।প্রথমেই আমরা আলোচনা করব ...

May 7, 20233 min read

Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস

সবার প্রথমে আমাদের একটা Directory বানাতে হবে। আপনার Project এর নাম দিয়ে একটি Directory বানিয়ে ফেলুন। এরপর যেকোনো একটা Terminal ব্যবহার করে এই Directory তে ঢুকুন। npm install -D tailwindcss autoprefixer vite এই কমান্ড Terminal-এ দিবো। এক্সট্রা হিসেবে...

Apr 3, 20232 min read
Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস
S

Shikhun Blog

96 posts