সহজে HTML শিখুন।পর্ব-০১
হাই বন্ধুরা কেমন আছেন আপনারা? আশা করি সবাই ভালো আছেন।কারন Taza Trick ব্লগ সাইটের সাথে থাকলে সবাই ভালো থাকে।তো আজকে আমি আপনাদের সাথে শেয়ার করবো"সহজে HTML শিখুন" শিরোনামের টিউটোরিয়ালের প্রথম পর্ব। আপনারা চাইলে কম্পিউটারেও শিখতে পারেন। তো চলুন শুরু করা যাক। প্রথমে দেখা যাক,
HTML Introduction
প্রশ্নঃ HTML কী?
উঃ HTML হলো মার্কাপ ল্যাঙ্গুয়েজ যেটা দিয়ে ওয়েব পেজ এর কাঠামো তৈরি করা হয়। এবং ওয়েব সাইট ডিজাইন করা হয়।
HTML এর পূর্নরুপ:-
Hyper Text Markup Language.
মার্কাপ ল্যাঙ্গুয়েজ অর্থ অনেক গুলো মার্কাপ ট্যাগের সমষ্টি।
HTML ডকুমেন্ট HTML ট্যাগ এর মাধ্যমে পরিচালিত হয়।
একেকটা HTML ট্যাগ একেক ধরনের কাজ পরিচালনা করে থাকে।
উঃ HTML হলো মার্কাপ ল্যাঙ্গুয়েজ যেটা দিয়ে ওয়েব পেজ এর কাঠামো তৈরি করা হয়। এবং ওয়েব সাইট ডিজাইন করা হয়।
HTML এর পূর্নরুপ:-
Hyper Text Markup Language.
মার্কাপ ল্যাঙ্গুয়েজ অর্থ অনেক গুলো মার্কাপ ট্যাগের সমষ্টি।
HTML ডকুমেন্ট HTML ট্যাগ এর মাধ্যমে পরিচালিত হয়।
একেকটা HTML ট্যাগ একেক ধরনের কাজ পরিচালনা করে থাকে।
HTML Editors:-
প্রথমে একটা HTML কোড দেখে নিই।
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<p> This is a Paragraph.</p>
</body>
</html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<p> This is a Paragraph.</p>
</body>
</html>
এখন এই কোড টুকু আপনার ফোনে যে WebMasterLite বা QuickEdit ডাউনলোড করেছেন সেখানে নিজের হাতে লিখুন এবং সেভ করুন। অবশ্যই
যে নাম দিয়ে সেভ করবেন তার শেষে .html বা .htm দিবেন।আপনি যে ফাইলটি সেভ করেছেন এ ফাইলটি আপনার যেকোনো ব্রাউজার দিয়ে ওপেন করুন। এবং দেখুন কি দেখা যায়। এবং যাদের কম্পিউটার তারা,
আপনার কম্পিউটারে নোটপ্যাড ওপেন করে এই কোড টুকু লিখুন । তারপর সেটা যেকোনো একটা নাম দিয়ে সেভ করুন। অবশ্যই, যে নাম দিয়ে সেভ করবেন সেটার শেষে .html বা .htm দিবেন।
এবং Save as type এ Text Documents এর স্থলে All files করে দিবেন। এবার যেখানে সেভ করেছেন সেখানে গিয়ে দেখুন আপনার ঐ ফাইলটি রয়েছে।
যদি আপনার কম্পিউটারে Chrome ইন্সটল করা থাকে তাহলে দেখবেন সেটা ক্রোম এর আইকন হয়ে গেছে। যে ব্রাউজার ইন্সটল করা থাকবে সেই আইকন হয়ে যাবে। এখন ঐ ফাইলটি আপনার ব্রাউজারে ওপেন করুন। ওপেন করার পর
দেখতে পাবেন টাইটেল বার এ লেখা Title of Page এবং পেজের ভেতর বড় করে লেখা This is Heading 1 এবং তার নিচে ছোট করে লেখা This is a Paragraph.
যে নাম দিয়ে সেভ করবেন তার শেষে .html বা .htm দিবেন।আপনি যে ফাইলটি সেভ করেছেন এ ফাইলটি আপনার যেকোনো ব্রাউজার দিয়ে ওপেন করুন। এবং দেখুন কি দেখা যায়। এবং যাদের কম্পিউটার তারা,
আপনার কম্পিউটারে নোটপ্যাড ওপেন করে এই কোড টুকু লিখুন । তারপর সেটা যেকোনো একটা নাম দিয়ে সেভ করুন। অবশ্যই, যে নাম দিয়ে সেভ করবেন সেটার শেষে .html বা .htm দিবেন।
এবং Save as type এ Text Documents এর স্থলে All files করে দিবেন। এবার যেখানে সেভ করেছেন সেখানে গিয়ে দেখুন আপনার ঐ ফাইলটি রয়েছে।
যদি আপনার কম্পিউটারে Chrome ইন্সটল করা থাকে তাহলে দেখবেন সেটা ক্রোম এর আইকন হয়ে গেছে। যে ব্রাউজার ইন্সটল করা থাকবে সেই আইকন হয়ে যাবে। এখন ঐ ফাইলটি আপনার ব্রাউজারে ওপেন করুন। ওপেন করার পর
দেখতে পাবেন টাইটেল বার এ লেখা Title of Page এবং পেজের ভেতর বড় করে লেখা This is Heading 1 এবং তার নিচে ছোট করে লেখা This is a Paragraph.
HTML Basic
নিচে HTML এর Simple Structure দেখে নেয়া যাক:-
<html>
<head>
<title>content</title>
</head>
<body>
<h1>content</h1>
<p>content</p>
</body>
</html>
দেখা শেষ।
এবার একটি HTML কোড দেখি।
<head>
<title>content</title>
</head>
<body>
<h1>content</h1>
<p>content</p>
</body>
</html>
দেখা শেষ।
এবার একটি HTML কোড দেখি।
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<p> This is a Paragraph.</p>
</body>
</html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<p> This is a Paragraph.</p>
</body>
</html>
উপরের HTML কোড এর ব্যাখ্যাঃ-
এখানে আমি প্রথমে লিখেছি <!DOCTYPE html> এটা দিয়ে ব্রাউজারকে বুঝিয়ে দিয়েছি যে এটা একটা html ডকুমেন্ট।Doctype এটা ছোট হাতের বড় হাতের দুইভাবেই দিতে পারবেন। তারপর দিয়েছি <html> এটা দিয়ে বোঝিয়েছি যে html ডকুমেন্ট শুরু হলো।
তারপর আছে <head> ট্যাগ এটা দিয়ে আমরা হেড ট্যাগ শুরু হয়েছে বুঝিয়েছি। এই <head> ট্যাগের ভিতরে আমরা যা দিব তা ব্রাউজারে দেখা যাবে না।
হেড ট্যাগ এর কাজ:-
তারপর আছে <head> ট্যাগ এটা দিয়ে আমরা হেড ট্যাগ শুরু হয়েছে বুঝিয়েছি। এই <head> ট্যাগের ভিতরে আমরা যা দিব তা ব্রাউজারে দেখা যাবে না।
হেড ট্যাগ এর কাজ:-
(১) এই হেড ট্যাগ এর ভিতর টাইটেল ট্যাগ দিয়ে আমরা ব্রাউজারে পেজে এর টাইটেল দেখাবো।
(২) CSS বা JS ফাইল নির্ধারণ করে দিব ইত্যাদি।
(২) CSS বা JS ফাইল নির্ধারণ করে দিব ইত্যাদি।
তারপর আছে <title> এই টাইটেল ট্যাগ এর ভেতর আমরা আমাদের ওয়েব পেজের নাম দেই যা ব্রাউজারের টাইটেল বারে দেখা যায়।
</title> এটা হলো টাইটেল ট্যাগের ইন্ড ট্যাগ। এই ট্যাগের মাধ্যমে title ট্যাগের শেষ বুঝানো হয়েছে। </head> এটা দিয়ে হেড ট্যাগ শেষ হলো বুঝিয়েছি।
তারপর শুরু করেছি <body> ট্যাগ।এই ট্যাগ এর ভেতরে যা থাকবে সব ব্রাউজারে দেখা যাবে।
তারপর আছে <h1> ট্যাগ। এটা দিয়ে হেডিং নির্ধারণ করে দিয়েছি যে লেখা কত বড় দেখা যাবে।</h1> এটা শেষ ট্যাগ।
তারপর <p> এটা হল প্যারাগ্রাফ ট্যাগ। এখানে প্যারাগ্রাফ লেখা হয়।</p> এটা শেষ ট্যাগ।
সব ট্যাগের ইন্ড ট্যাগ বা শেষ ট্যাগ দিতে হয়।
ট্যাগ লেখার নিয়ম:- <tagname>content</tagname> এই ট্যাগ নেমের ভেতর আমাদের প্রয়োজনীয় ট্যাগ নেম দিয়ে কন্টেন্ট এর স্থলে কন্টেন্ট দিতে হবে।
এবার আমরা দেখবো HTML এর ব্যাসিক ট্যাগ গুলো।
</title> এটা হলো টাইটেল ট্যাগের ইন্ড ট্যাগ। এই ট্যাগের মাধ্যমে title ট্যাগের শেষ বুঝানো হয়েছে। </head> এটা দিয়ে হেড ট্যাগ শেষ হলো বুঝিয়েছি।
তারপর শুরু করেছি <body> ট্যাগ।এই ট্যাগ এর ভেতরে যা থাকবে সব ব্রাউজারে দেখা যাবে।
তারপর আছে <h1> ট্যাগ। এটা দিয়ে হেডিং নির্ধারণ করে দিয়েছি যে লেখা কত বড় দেখা যাবে।</h1> এটা শেষ ট্যাগ।
তারপর <p> এটা হল প্যারাগ্রাফ ট্যাগ। এখানে প্যারাগ্রাফ লেখা হয়।</p> এটা শেষ ট্যাগ।
সব ট্যাগের ইন্ড ট্যাগ বা শেষ ট্যাগ দিতে হয়।
ট্যাগ লেখার নিয়ম:- <tagname>content</tagname> এই ট্যাগ নেমের ভেতর আমাদের প্রয়োজনীয় ট্যাগ নেম দিয়ে কন্টেন্ট এর স্থলে কন্টেন্ট দিতে হবে।
এবার আমরা দেখবো HTML এর ব্যাসিক ট্যাগ গুলো।
<h1> ট্যাগ
এটাকে বলা হয় হেডিং ট্যাগ। মোট হেডিং ট্যাগ আছে ৬ টি। একেক হেডিং ট্যাগে একেক সাইজের লেখা হয়।
চলুন দেখে নেয়া যাক।
এটাকে বলা হয় হেডিং ট্যাগ। মোট হেডিং ট্যাগ আছে ৬ টি। একেক হেডিং ট্যাগে একেক সাইজের লেখা হয়।
চলুন দেখে নেয়া যাক।
<!DOCTYPE html>
<html>
<body>
<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>
<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>
এই কোডটুকু লিখে ব্রাউজারে ওপেন করুন। কি দেখতে পাচ্ছেন?
প্রথমে বড় করে লেখা তারপর আস্তে আস্তে ছোট হয়ে আসছে।
</html>
এই কোডটুকু লিখে ব্রাউজারে ওপেন করুন। কি দেখতে পাচ্ছেন?
প্রথমে বড় করে লেখা তারপর আস্তে আস্তে ছোট হয়ে আসছে।
<p> ট্যাগ
এটাকে বলে প্যারাগ্রাফ ট্যাগ। এই ট্যাগের মাধ্যমে আমরা ওয়েব পেজের স্বাভাবিক লেখাগুলোকে দেখাই। যেমন-
এটাকে বলে প্যারাগ্রাফ ট্যাগ। এই ট্যাগের মাধ্যমে আমরা ওয়েব পেজের স্বাভাবিক লেখাগুলোকে দেখাই। যেমন-
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
</html>
<a> ট্যাগ
এটাকে বলা হয় Link ট্যাগ।
আমরা দেখেছি যে ওয়েব পেজে কোন লেখাতে ক্লিক করলে অন্য একটা লিংক এ বা অন্য কোন পেজে চলে যায়। এই এক পেজ থেকে অন্য পেজে যাওয়ার কাজটি করে <a> ট্যাগ।যেমন-
এটাকে বলা হয় Link ট্যাগ।
আমরা দেখেছি যে ওয়েব পেজে কোন লেখাতে ক্লিক করলে অন্য একটা লিংক এ বা অন্য কোন পেজে চলে যায়। এই এক পেজ থেকে অন্য পেজে যাওয়ার কাজটি করে <a> ট্যাগ।যেমন-
</body>
</html>
এই কোডটির <a দিয়ে বোঝিয়েছি যে লিংক শুরু হয়েছে। তারপরে দিয়েছি href=”https://www.google.com”> এটা দিয়ে বুঝিয়েছি কোন লিংক এ যাবে।
এখন লিখেছি This is a google link । এখানে যা লিখবো সেটার সাথে লিংক তৈরি হবে। </a> ট্যাগ শেষ করেছি।এই কোডটুকু লিখে ব্রাউজারে ওপেন করুন। দেখবেন
একটি লেখা আছে This is a google link এখানে ক্লিক করলে আপনি চলে যাবেন Google সার্চ ইঞ্জিনে।
</html>
এই কোডটির <a দিয়ে বোঝিয়েছি যে লিংক শুরু হয়েছে। তারপরে দিয়েছি href=”https://www.google.com”> এটা দিয়ে বুঝিয়েছি কোন লিংক এ যাবে।
এখন লিখেছি This is a google link । এখানে যা লিখবো সেটার সাথে লিংক তৈরি হবে। </a> ট্যাগ শেষ করেছি।এই কোডটুকু লিখে ব্রাউজারে ওপেন করুন। দেখবেন
একটি লেখা আছে This is a google link এখানে ক্লিক করলে আপনি চলে যাবেন Google সার্চ ইঞ্জিনে।
<img> ট্যাগ
এই ট্যাগের কোন ইন্ড ট্যাগ নেই।
ওয়েব পেজে ছবি দেওয়ার জন্য <img> ট্যাগ ব্যবহার করা হয়। যেমন-
এই ট্যাগের কোন ইন্ড ট্যাগ নেই।
ওয়েব পেজে ছবি দেওয়ার জন্য <img> ট্যাগ ব্যবহার করা হয়। যেমন-
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<img src="image/tazatrick.jpg" alt="tazatrick.blogspot.com" width="150px" height="50px"/>
</body>
</html>
<img দিয়ে বুঝিয়েছি img ট্যাগ শুরু হয়েছে।
তারপর,
src=”image/tazatrick.jpg” দিয়ে বুঝিয়েছি ইমেজের উৎস বা লিংক হচ্ছে image ফোল্ডারের ভেতর tazatrick.jpg নামের ইমেজ। এখানে ইমেজ যে ফোল্ডারে আছে সে ফোল্ডারে html ফাইলও রাখতে হবে। তারপর alt দিয়েছি কারণ যদি কখনো ইমেজ লোড না হয় বা ইমেজ না আসে তাহলে ইমেজ এর জায়গায় tazatrick.blogspot.com লেখা দেখা যাবে।
তারপর দিয়েছি width=”150px” দিয়ে বুঝিয়ে ইমেজের প্রস্থ হবে 150 পিক্সেল এবং height=”50px″ দিয়ে বুঝিয়েছি যে ইমেজের দৈর্ঘ্য হবে 50 পিক্সেল। <img> ট্যাগের কোন ইন্ড ট্যাগ নেই।তাই এটাকে সেল্ফ ইন্ড ট্যাগ বলা হয়।তো আজকে এই পর্যন্তই।
</html>
<img দিয়ে বুঝিয়েছি img ট্যাগ শুরু হয়েছে।
তারপর,
src=”image/tazatrick.jpg” দিয়ে বুঝিয়েছি ইমেজের উৎস বা লিংক হচ্ছে image ফোল্ডারের ভেতর tazatrick.jpg নামের ইমেজ। এখানে ইমেজ যে ফোল্ডারে আছে সে ফোল্ডারে html ফাইলও রাখতে হবে। তারপর alt দিয়েছি কারণ যদি কখনো ইমেজ লোড না হয় বা ইমেজ না আসে তাহলে ইমেজ এর জায়গায় tazatrick.blogspot.com লেখা দেখা যাবে।
তারপর দিয়েছি width=”150px” দিয়ে বুঝিয়ে ইমেজের প্রস্থ হবে 150 পিক্সেল এবং height=”50px″ দিয়ে বুঝিয়েছি যে ইমেজের দৈর্ঘ্য হবে 50 পিক্সেল। <img> ট্যাগের কোন ইন্ড ট্যাগ নেই।তাই এটাকে সেল্ফ ইন্ড ট্যাগ বলা হয়।তো আজকে এই পর্যন্তই।
বাড়ীর কাজ:
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে টাইটেল থাকবে my first website এবং হেডিং hi লেখা থাকবে welcome to my website সাধারণ লেখা থাকবে visit another website তার পর নিচে থাকবে Taza Trick যেখানে ক্লিক করলে tazatrick.blpgsppt.com এ চলে যাবে। তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে টাইটেল থাকবে my first website এবং হেডিং hi লেখা থাকবে welcome to my website সাধারণ লেখা থাকবে visit another website তার পর নিচে থাকবে Taza Trick যেখানে ক্লিক করলে tazatrick.blpgsppt.com এ চলে যাবে। তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
শেষ কথা:
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
প্রতিদিন একটি একটি করে পর্ব দিব। আগামীকাল দেখা হবে দ্বিতীয় পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন। আপনার জীবনকে সহজ ও সুন্দর করতেই আমাদের এই Taza Trick ব্লগ সাইটের যাত্রা। প্রতিদিন নতুন নতুন ট্রিক জানতে এবং আপনার জীবনকে সহজ করতে আমাদের সাইটের সাথেই থাকুন। সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
প্রতিদিন একটি একটি করে পর্ব দিব। আগামীকাল দেখা হবে দ্বিতীয় পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন। আপনার জীবনকে সহজ ও সুন্দর করতেই আমাদের এই Taza Trick ব্লগ সাইটের যাত্রা। প্রতিদিন নতুন নতুন ট্রিক জানতে এবং আপনার জীবনকে সহজ করতে আমাদের সাইটের সাথেই থাকুন। সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
Good
ReplyDelete