সূচীপত্র
প্ৰথম অধ্যায়
-এইচটিএমএল কি?
-এইচটিএমএল শেখার পূর্বপ্রস্তুতি
-এইচটিএমএল সিনট্যাক্স
-এইচটিএমএল ইলিমেন্ট
-এইচটিএমএল আট্ৰিবিউট
-এইচটিএমএল কমেন্ট
- এইচটিএমএল ভ্যালিডেটর
দ্বিতীয় অধ্যায়
-এইচটিএমএল প্যারাগ্রাফ -এইচটিএমএল লাইনব্রেক - এইচটিএমএল হেডিং -এইচটিএমএল লিংক - এইচটিএমএল ইমেজ -এইচটিএমএল লিস্ট
- এইচটিএমএল টেবিল -এইচটিএমএল ফর্ম
- এইচটিএমএল এনটাইটি
- এইচটিএমএল আইফ্রেম
তৃতীয় অধ্যায়
- এইচটিএমএল হেডার (Header)
- এইচটিএমএল নেভ (HTML Nav)
- এইচটিএমএল সেকশন (Section)
- এইচটিএমএল আর্টিকেল (Article)
- এইচটিএমএল ফুটার ( Footer)
- এইচটিএমএল অডিও (Audio)
- এইচটিএমএল ভিডিও (Video)
প্রথম অধ্যায়
এই অধ্যায়ে আমরা এইচটিএমএল এর সিনট্যাক্স নিয়ে আলোচনা করবো । এই অধ্যায় থেকেই আপনি এইচটিএমএল কোড লেখা শুরু করতে পাড়বেন।
এইচটিএমএল কি?
HTML এর পূর্ণরূপ হচ্ছে Hyper Text Markup Language. এটা একটা মার্কাআপ ল্যাঙ্গুয়েজ । এইচটিএমএল কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটা দিয়ে ওয়েবসাইটের কাঠামো গঠন করা হয় । এইচটিএমএল এর সর্বশেষ ভার্সন হচ্ছে এইচটিএমএল ৫ । এতে নতুন অনেক ফিচার যোগ করা হয়েছে ।
ওয়েব ডিজাইন এবং ডেভেলপমেন্ট শেখার প্রথম ধাপ হচ্ছে এইচটিএমএল । অর্থাৎ, ওয়েব ডিজাইন কিংবা ডেভেলপমেন্ট যা-ই শিখুন না কেন আপনাকে প্রথমে এইচটিএমএল শিখতে হবে। তবে, এইচটিএমএল শেখা খুবই সহজ । ভালোভাবে প্র্যাকটিস করলে আপনি কিছু দিনের মধ্যেই এইচটিএমএল শিখতে পারবেন ।
এইচটিএমএল শেখার পূর্বপ্রস্তুতি
এইচটিএমএল শেখা
এইচটিএমএল শিখতে হলে আপনার কম্পিউটার এর বেসিক ধারণা থাকলেই চলবে । এইচটিএমএল শেখার পূর্বে আপনাদের কিছু পূর্ব প্রস্তুতির প্রয়োজন রয়েছে । আমি তা নিচে আলোচনা করেছি।
টেক্সট এডিটর ইন্সটল করাঃ এইচটিএমএল শিখতে হলে আপনার কম্পিউটার এ একটি টেক্সট এডিটর ইন্সটল করা থাকতে হবে । প্রতিটি কম্পিউটার এ উইন্ডোজ ইন্সটল দেওয়ার পর ডিফল্টভাবে নোটপ্যাড (Notepad) ইন্সটল করা থাকে । আপনি চাইলে নোটপ্যাড প্লাস প্লাস ব্যবহার করতে পারেন । নোটপ্যাড প্লাস প্লাস এ বেশকিছু বাড়তি ফিচার পাবেন । এছাড়া, আরও বেশ কিছু টেক্সট এডিটর রয়েছে ।
ওয়েব ব্রাউজার ইন্সটল করাঃ এরপর আপনার কম্পিউটার এ একটি ওয়েব ব্রাউজার ইন্সটল করা থাকতে হবে । প্রত্যেক কম্পিউটার এ ডিফল্টভাবে ব্রাউজার ইন্সটল করা থাকে । প্রত্যেক কম্পিউটার এ ডিফল্টভাবে ব্রাউজার ইন্সটল করা থাকে । তবে, সেটা ইন্টারনেট এক্সপ্লোরার । বেশীরভাগ সময় লক্ষ্য করবেন, এসব ব্রাউজারের ভার্সন পুরনো । তাই, আমি আপনাকে বলবো একটি নতুন ভার্সনের ব্রাউজার ইন্সটল করার জন্য । এক্ষেত্রে, আপনি মোজিলা ফায়ারফক্স অথবা গুগল
ক্রোম ব্যবহার করতে পারেন । এছাড়া, আপনি চাইলে অন্যান্য আপগ্রেডেট ভার্সনের ব্রাউজার ব্যবহার করতে পারেন । এটা, সম্পূর্ণ আপনার রুচির উপর নির্ভরশীল ।
মোজিলা ফায়ারফক্স ডাউনলোড করার জন্য
(https://www.mozilla.org/en-US/firefox/new/) এই লিংক ক্লিক করুন এবং গুগল ক্রোম ডাউনলোড করার জন্য (https://www.google.com/chrome/) এই লিংক এ ক্লিক করুন।
ফাইলের এক্সটেন্সান প্রদর্শন করানোঃ আপনারা দেখবেন যে, আপনাদের কম্পিউটারের কোন ফাইলের শেষে ফাইলের ফরম্যাট লেখা থাকে না । অর্থাৎ, ফাইলটি কোন ফরম্যাট এ আছে তা লেখা থাকে না । যেমনঃ সাধারণভাবে একটি ছবি আপনার কম্পিউটার এ থাকবে image_name নামে । যদি আপনি ফাইল এক্সটেনশন প্রদর্শন করান তাহলে ছবি থাকবে image_name.png নামে। ফলে, আমরা সহজেই ফাইলের ফরম্যাট সনাক্ত করতে পারি । জাভাস্ক্রিপ্ট শেখার জন্য কম্পিউটারের ফাইল ফাইল এক্সটেনশন প্রদর্শন করানো জরুরি কিছু নয়। তবে, আপনি আপনার সুবিধার জন্য ফাইল এক্সটেনশন প্রদর্শন করাতে পারেন ।
আপনার কম্পিউটারের ফাইল ফাইল এক্সটেনশন প্রদর্শন করার জন্য, Control Panel > Folder Options থেকে View এ ক্লিক করবেন এরপর Hide extensions for known file types
থেকে টিকচিহ্ন তুলে দিবেন। সর্বশেষ, Apply প্রেস করে OK বাটনে ক্লিক করবেন।
এবার আপনার কম্পিউটারের প্রতিটি ফাইলের এক্সটেনশন দেখতে পাড়বেন। অর্থাৎ, একটি এইচটিএমএল ফাইলের নামের পর .html থাকবে, একটি সিএসএস ফাইলের নামের পর .css থাকবে। ফলে, আপনি সহজেই ফাইলের ফরম্যাট সনাক্ত করতে পাড়বেন ।
এইচটিএমএল সিনট্যাক্স
এখন আমি এইচটিএমএল এর গঠন সম্পর্কে আলোচনা করবো । প্রত্যেকটা লাইন বুঝার চেষ্টা করুন । যদি কোন লাইন বুঝতে অসুবিধা হয় তাহলে আমাকে জানাবেন । মনে রাখবেন, এই অংশ টুকু না বুঝলে বাকি অংশ বুঝতে পারবেন না । তাই মনোযোগ দিয়ে বুঝার চেষ্টা করুন ।
প্রথমে আমরা এইচটিএমএল ৫ এর স্ট্রাকচার দেখবো;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<meta charset="UTF-8">
<title></title>
</body>
</html>
উপরে আমরা এইচটিএমএল এর স্ট্রাকচার লিখলাম । এটা এইচটিএমএল এর সর্বশেষ ভার্সন এইচটিএমএল ৫ এর স্ট্রাকচার
এবার আমরা একটি উদাহরণ দেখব এবং উদাহরনে বিস্তারিত আলোচনা করবো । এইচটিএম
নিচের কোডটুকু নোটপ্যাড এ লিখুন:
ং উদাহরনে বিস্তারিত তা
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> This is Title </title>
</head>
<body>
Hello World !
</body>
</html>
Let's b
শুরু করার জন্য প্রথমেই
our career.
এবার কোডটুকু নোটপ্যাড এ লিখে index.html নামে সেভ করুন । তাহলে আপনি Hello World! লেখাটি দেখতে
পারবেন।
কোড বিশ্লেষণ
আমি বুঝতে পারছি আপনারা এখনো হয়ত কিছুই বুঝতে পারেন নি । কোন সমস্যা নেই । আমি এখন প্রতিটি লাইন আপানদের বুঝিয়ে দিচ্ছি।
১। প্রথম লাইনটি লিখে ব্রাউজারকে বুঝানো হয়েছে যে এটা একটা এইচটিএমএল ডকুমেন্ট । আমরা এইচটিএমএল৫ ব্যবহার করছি তাই আমরা <!DOCTYPE HTML> ব্যবহার করছি । যদি আমরা এইচটিএমএল ৪.০১ ব্যবহার করতাম তাহলে নিচের মত লিখতে হতো;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd">
Transitional // EN"
যাইহোক, যেহেতু আমরা এইচটিএমএল৫ ব্যবহার করছি তাই আমরা শুধু <!DOCTYPE HTML> লিখবো । সব এইচটিএমএল এর শুরুতে এই ডক টাইপ ব্যবহার করতে হবে । অনেকে এইচটিএমএল ডকটাইপ এ গুরুত্ব দেন না । কিন্তু, প্রফেশনাল হতে হলে এ বিষয়টি কখনো এড়িয়ে যাবেন না । কেননা, ডকটাইপ ব্যবহার না করলে কিছু ব্রাউজারে ঠিকমত আউটপুট আসে না । তাই, প্রত্যেক এইচটিএমএল ফাইলেরশুরুতে ডকটাইপ ব্যবহার করবেন।
২ । দ্বিতীয় লাইনটি বুঝানোর আগে আমি আপনাদের কাছে এইচটিএমএল ট্যাগ সম্পর্কে আলোচনা করে নিই । উপরের লিখিত html, head, title, body প্রত্যেকটিকে ট্যাগ বলা হয় । একটু লক্ষ্য করে দেখুন ট্যাগ Less Than চিহ্নদিয়ে শুরু হয় এবং Greater Than চিহ্ন দিয়ে শেষ হয় । তাই, <html>, <head>,
<title>, <body>লেখা হয়েছে । প্ৰায় প্রত্যেকটিট্যাগ এর শুরু এবং শেষ আছে । তাই, যখন <html> ট্যাগ শুরু হয়েছে তখন ট্যাগটি </html> এভাবে শেষ হয়েছে । ট্যাগ শেষ করার জন্য Less Than চিহ্নের পরে একটা Forward Slash (/) চিহ্ন দিতে হয় । ট্যাগ সরাসরি ব্রাউজারে প্রদর্শন করে না । তাই দেখুন index.html ফাইলটি ওপেন করার পর কোন ট্যাগ ব্রাউজারে প্রদর্শিত হয়নি । শুধু ইলিমেন্টসমূহ ব্রাউজের প্রদর্শিত হয় । এইচটিএমএল ট্যাগ এর মাঝখানে যে টেক্সট থাকে তা হচ্ছে ইলিমেন্ট।
৩ । দ্বিতীয় লাইনটি হচ্ছে ট্যাগ । সমস্ত এইচটিএমএল কোড <html> ট্যাগ এর মাঝে লিখতে হয় । দশম লাইন এ <html> এর ট্যাগ শেষ করা হয়েছে। <html> ট্যাগ এর দুটি সেকশন রয়েছে একটি হচ্ছে <head> সেকশনএবং অপরটি হচ্ছে <body> সেকশন
৪। তৃতীয় লাইনটি হচ্ছে একটি ট্যাগ যা ষষ্ঠ লাইন এ শেষ হয়েছে । একইভাবে, <body> একটি ট্যাগ যা পরবর্তীতে ট্যাগ শেষ করা হয়েছে।
৫ । আমরা চতুর্থ লাইন এ meta নামে একটা ট্যাগ ব্যবহার করেছি । মেটা ট্যাগ এর ভিতরে charset লেখা হয়েছে। এটাকে বলা হয় এট্রিবিউট । পরবর্তীতে অ্যাট্রিবিউট সম্পর্কে আরও ধারণা পাবেন । লক্ষ্য করে দেখুন meta একটা সিঙ্গেল ট্যাগ । কারন, এই ট্যাগ শুরু হয়েছে কিন্তু এই ট্যাগ এর শেষ করা হয়নি । একটা ওয়েবসাইট এর সমস্ত লেখা কোন ফরম্যাট এ থাকবে সেটা নির্দেশ করার জন্য charset আট্রিবিউট ব্যবহার করা হয় ।
৬ । অষ্টম লাইন এ Hello World! লিখেছি এবং এটা ব্রাউজারে প্রদর্শিত হয়েছে । এটা হচ্ছে এইচটিএমএল ইলিমেন্ট । শুরু করার ট্যাগ এবং শেষকরার ট্যাগ এর মাঝখানে ইলিমেন্ট থাকে এবং ইলিমেন্ট ব্রাউজারে প্রদর্শিত হয়। কিন্তু, ট্যাগ ব্রাউজারে সরাসরি প্রদর্শিত হয় না ।
সবশেষে, আপনি ফাইলটি index.html নামে সেভ করেছেন । এখানে আপনি index লেখার পরিবর্তে যেকোনো টেক্সট লিখতে পারেন । এটা আপনার ইচ্ছা । তবে .html এক্সটেনশন ঠিক রাখতে হবে । অর্থাৎ ফাইলের নামের পর .html থাকতে হবে । অনেকে .html এর পরিবর্তে ভুল করে .txt দিয়ে সেভ করে ব্রাউজারে ওপেন করান । কিন্তু এতে কাজ করবে না ।
এইচটিএমএল ইলিমেন্ট
এইচটিএমএল শুরু করার ট্যাগ এবং শেষ করার ট্যাগ এর ভিতরে যে কন্টেন্ট থাকে তা-ই হচ্ছে ইলিমেন্ট । একটি এইচটিএমএল ডকুমেন্ট ওপেন করলে আমরা ব্রাউজারে যা দেখতে পাই, তাই হচ্ছে ইলিমেন্ট ।
এইচটিএমএল ইলিমেন্ট এর সিনট্যাক্স হচ্ছে;
<tagname> HTML Element </tagname>
বিষয়টি আরও পরিষ্কার করার জন্য এখন আমি একটি উদাহরন দিচ্ছি;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> This is Title </title>
</head>
<body>
Hello World !
</body>
</html>
উপরের উদাহরনে আমরা Hello World! লিখেছি এবং এটা ব্রাউজারে প্রদর্শিত হয়েছে । এটাই- হচ্ছে এইচটিএমএল ইলিমেন্ট । শুরু করার ট্যাগ এবং শেষকরার ট্যাগ এর মাঝখানে ইলিমেন্ট থাকে এবং ইলিমেন্ট ব্রাউজারে প্রদর্শিত হয় কিন্তু, ট্যাগ ব্রাউজারে সরাসরি প্রদর্শিত হয় না ।
এইচটিএমএল আট্রিবিউট
এইচটিএমএল আট্রিবিউট খুবই গুরুত্বপূর্ণ একটা টপিক । এইচটিএমএল এর কিছু ট্যাগ আছে যা সাধারণভাবে লিখলে কাজ করে না । এসব ট্যাগ এ অ্যাট্রিবিউট ব্যবহার করা হয় । এইচটিএমএল আট্রিবিউট এর দুইটি অংশ থাকে একটি হচ্ছে name এবং অপরটি হচ্ছে Value. এইচটিএমএল অ্যাট্রিবিউট লেখার নিয়ম হচ্ছে;
<tagname attributename="value"> This is
Element </tagname>
অর্থাৎ এইচটিএমএল ট্যাগের নামের পরে একটা স্পেস দিয়ে আট্রিবিউট এর নাম দিতে হবে । এরপর একটা সমান (=) চিহ্ন দিয়ে ইনভার্টেড কমা (" ") এর ভিতরে আট্রিবিউট এর ভ্যালু দিতে হবে । এখন আমরা এইচটিএমএল আট্রিবিউট এর একটা উদাহরন দেখবো ।
<meta charset="UTF-8">
এখানে meta নামে একটা ট্যাগ ব্যবহার করেছি । মেটা ট্যাগ এর ভিতরে charset="UTF-8" লেখা হয়েছে। এটাকে বলা হয় এট্রিবিউট । এখানে charset লেখাটি হচ্ছে name এবং UTF-8 লেখাটি হচ্ছে Value.
এইচটিএমএল কমেন্ট
কোড প্রকাশ করার জন্য কমেন্ট অত্যন্ত গুরুত্বপূর্ণ । আপনি যখন হাজারহাজার লাইন এইচটিএমএল লিখবেন তখন আপনি কোন কোড কি জন্য লিখেছেন তা কিভাবে সনাক্ত করবেন? তাই, আমরা কমেন্ট ব্যবহার করে সহজেই বুঝতে পারি যে কোন কোড কি কারনে ব্যবহার করা হয়েছে । এছাড়া, আপনি কমেন্ট ব্যবহার করে কোন কোডের কার্যক্রম স্থগিত রাখতে পারেন । অর্থাৎ, আপনি যদি চান যে এইচটিএমএল কোন অংশস্থগিত রাখতে পারেন । এইচটিএমএল কমেন্ট ব্রাউজারে প্রদর্শিত হয় না ।
এইচটিএমএল কমেন্ট লেখার সিনট্যাক্স হচ্ছে;
<!-- Write Your HTML Comment Here -->
আশা করি বুঝতে পেড়েছেন ।
এইচটিএমএল ভ্যালিডেটর
আপনি কিছু এইচটিএমএল কোড লিখলেন এখন এসব কোড সঠিক নিয়মে লেখা হয়েছে কি না সেটা পরীক্ষা করার, জন্য আপনি এইচটিএমএল ভ্যালিডেটর ব্যবহার করতে পারেন। কোড ভ্যালিডেট করার মাধ্যমে কোথাও ভুল আছে কিনা কিংবা কোড সঠিক নিয়মে লিখেছেন কিনা তা দেখতে পারবেন ।
এইচটিএমএল ভ্যালিডেটর ব্যবহার করতে (https://validator.w3.org/) লিংক এ যান ।
দ্বিতীয় অধ্যায়
গত অধ্যায়ে আমরা এইচটিএমএল শেখার পূর্বপ্রস্তুতি সম্পর্কে জানবো । এইচটিএমএল কোড কিভাবে লিখতে হয় এবং এইচটিএমএল কমেন্ট নিয়ে আলোচনা করেছি । আশা করি প্রথম অধ্যায় বুঝতে অসুবিধা হয়নি । যদি আপনি প্রথম অধ্যায় ভালভাবে বুঝতে পাড়েন তাহলে এখন থেকে আপনি দ্বিতীয় অধ্যায় শুরু করতে পাড়েন । এ অধ্যায়ে আমরা এইচটিএমএল এর ট্যাগ নিয়ে আলোচনা করবো ।
এইচটিএমএল প্যারাগ্রাফ
এখন আমরা এইচটিএমএল প্যারাগ্রাফ ট্যাগ নিয়ে আলোচনা করবো। এইচটিএমএল এ কোন টেক্সট লেখার জন্য সাধারণত এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় । প্যারাগ্রাফ ট্যাগ ব্যবহার করে আমরা টেক্সটকে কয়েকটি ভাগে বিভক্ত করে ফেলতে পারি । এছাড়া, এটি এইচটিএমএল এর খুবই গুরুত্বপূর্ণ একটি ট্যাগ । আপনাদের কাছে বিষয়টি পরিষ্কার করার জন্য এখন একটি উদাহরণ দিচ্ছি । প্রথমে নিচের কোডটুকু একটি টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস এ লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body> </html>
<meta charset="UTF-8">
<title> HTML Paragraph </title>
<p> Bangladesh is our Country. It is a very beautiful
Country. </p> <p>It is a small country. But it has a Large
Population. </p>
এবার কোডটুকু একটি ব্রাউজারে প্রদর্শন করার দেখতে পারবেন যে আমরা যে টেক্সট ব্যবহার করেছি তা দুইটি অনুচ্ছেদে বিভক্ত হয়ে গেছে।
এইচটিএমএল লাইন ব্রেক ট্যাগ কোন লাইন ব্রেক করার জন্য ব্যবহার করা হয় । আমরা মাইক্রোসফট কোন ওয়ার্ড লাইন শেষ করে নতুন লাইন শুরু করার জন্য কিবোর্ড এ এন্টার (Enter) প্রেস করি । একইভাবে এইচটিএমএল এ কোন লাইন ছেড়ে নতুন লাইন শুরু করার জন্য এইচটিএমএল লাইন ব্রেকআপ ট্যাগটি -আপ ট্যাগ ব্যবহার করা হয় । লাইনব্রেক- ব্যতিক্রম ট্যাগসমূহের একটি । কেননা এইচটিএমএল এর, লাইনব্রেক ট্যাগ অন্যান্য ট্যাগ এর মত নয় । লাইন ব্রেক আপ ট্যাগটি লেখা হয় <br /> এভাবে। বিষয়টি ভাল করে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<meta charset="UTF-8">
<title> HTML Line Break </title>
</body> </html>
<p> Bangladesh is our Country. </p><br />
<p>It is a Very Beatiful Country. </p><br /> <p>It has
a large population. </p>
এবার index.html ফাইলটি ওপেন করে দেখুন লাইনসমূহ লাইন ব্রেক-আপ ট্যাগ অনুযায়ী শেষ হয়েছে। যদি লাইনব্রেক আপ ট্যাগ ব্যবহার করা ছাড়া উপরের কোডটুকুর আউটপুট ব্রাউজারে প্রদর্শন করানো হতো তাহলে কেমন দেখাতো সেটা জানতে লাইন ব্রেক –আপ ট্যাগ কেটে দিয়ে আবার ব্রাউজারে প্রদর্শন করান । অর্থাৎ নিচের কোডটুকু index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Line Break </title>
</head>
<body>
</body> </html>
<p> Bangladesh is our Country. </p> <p>It
is a Very Beatiful Country. </p> <p>It has a large population.
</p>
এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করান । তাহলে দেখতে পারবেন লাইনসমূহ নিচে ইচে সজ্জিত হয়নি
এইচটিএমএল হেডিং
এখন আমরা এইচটিএমএল হেডিং নিয়ে আলোচনা করবো । আমরা যখন কোন কন্টেন্ট এরশিরোনাম লিখতে যাই তখন আমরা এইচটিএমএল হেডিং ট্যাগ ব্যবহার করি । এইচটিএমএলএর হেডিং ট্যাগ ছয়টি । এখন আমরা ছয়টি হেডিং ট্যাগ এর উদাহরণ দেখবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading </title>
</head>
<body>
<h1>This is Heading One </h1><br />
<h2>This is Heading Two </h2><br />
</body>
</html>
<h3>This is Heading Three </h3><br />
<h4>This is Heading Four </h4><br />
<h5>This is Heading Five </h5><br />
<h6>This is Heading Six </h6><br />
<body>
</body> </html>
<p> India is our
Country. </p> <p>It is a Very Beatiful Country. </p>
<p>It has a large population. </p>
এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করান । তাহলে দেখতে পারবেন লাইনসমূহ নিচে ইচে সজ্জিত হয়নি
এইচটিএমএল হেডিং
এখন আমরা এইচটিএমএল হেডিং নিয়ে আলোচনা করবো । আমরা যখন কোন কন্টেন্ট এরশিরোনাম লিখতে যাই তখন আমরা এইচটিএমএল হেডিং ট্যাগ ব্যবহার করি । এইচটিএমএলএর হেডিং ট্যাগ ছয়টি । এখন আমরা ছয়টি হেডিং ট্যাগ এর উদাহরণ দেখবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading </title>
</head>
<body>
<h1>This is Heading One </h1><br />
<h2>This is Heading Two </h2><br />
</body>
</html>
<h3>This is Heading Three </h3><br />
<h4>This is Heading Four </h4><br />
<h5>This is Heading Five </h5><br />
<h6>This is Heading Six </h6><br />
এইচটিএমএল ইমেজ
ওয়েবসাইটের জন্য ইমেজ ব্যবহার করা খুবই গুরুত্বপূর্ণ। একটি ওয়েবসাইটেরলোগো থেকে শুরু করে বিভিন্ন অংশে ইমেজ ব্যবহার করা হয় । এইচটিএমএল ইমেজ ব্যবহার করার জন্য <img src=""
alt="" /> ট্যাগ ব্যবহার করা হয় । img একটি সিঙ্গেল ট্যাগ । এই ট্যাগ এর ভিতরে src এবং alt এট্রিবিউট ব্যবহার করতে হয় । alt অ্যাট্রিবিউট এ ইমেজ এর নাম দিতে পারেন । এখানে আপনি ইমেজ এর সাথে প্রাসঙ্গিক যেকোনো নাম ব্যবহার করতে পারেন । alt আট্রিবিউট ব্যবহার না করলেও img ট্যাগ কাজ করে । তবে, alt আট্রিবিউট ব্যবহার করা উচিত । আপনাদের বুঝার সুবিধার্থে আমি আপনাদের কাছে এখন একটি উদাহরণ দিবো ।
এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Image </title>
</head>
<body>
</body> </html>
<img src="images/logo.png" alt="Logo"
/>
একটা বিষয় খেয়াল রাখবেন, আপনার ইমেজ এবং এইচটিএমএল ফাইল যদি একসাথে থাকেতাহলে এই পদ্ধতিতে কাজ করবে । যদি, আপনার index.html ফাইলটি ডেক্সটপ এ এবং ইমেজ ফাইল একটি images ফোল্ডার এর ভিতরে থাকে তাহলে আপনাকে <img
src="images/images-name.png" alt="Image Name" /> এভাবে লিখতে হবে ।
যদি ফাইলের ডিরেক্টরি সঠিকভাবে না দেন এবং ফাইলের এক্সটেন্সান না দেন তাহলে ইমেজ এর আউটপুট ঠিকভাবে
আসবে না ।
এইচটিএমএল লিস্ট ব্যবহার করে আপনি কোন কিছুর তালিকা প্রকাশ করতে পারেন ।আমরা ওয়েবসাইটের মেনু তৈরি করার সময় সাধারণত এইচটিএমএল লিস্ট ব্যবহার করেথাকি । এছাড়া, আমরা কোন কিছু পয়েন্ট আকারে লিখতে চাইলে এইচটিএমএল লিস্টব্যবহার করি। এইচটিএমএল এ সাধারণত দুই ধরনের লিস্ট রয়েছে। এ দুইটি লিস্টহচ্ছে;
•
Order List (অর্ডার লিস্ট)
•
Unorder List (আন অর্ডার লিস্ট)
Order List (অর্ডার লিস্ট): আমরা কোন তালিকা যখনক্রমিক সংখ্যা অনুযায়ী লিখে থাকি তখন আমরা এইচটিএমএল অর্ডার লিস্ট ব্যবহারকরতে পারি । এখন একটা উদাহরণ দিলে ব্যাপারটি আপনাদের কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML List </title>
</head>
<body>
<ol>
</body>
</html>
</ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> PHP </li>
<li>WordPress</li>
কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে olব্যবহার করেছি । olমানে হচ্ছে Order List এবং প্রতিটি লিস্ট এর জন্য
olএর ভিতরে li ব্যবহার করা হয় ।
Un order List (আন অর্ডার লিস্ট): আমরা কোন তালিকা যখনক্রমিক সংখ্যা অনুযায়ী না লিখে লিস্ট প্রকাশ করে থাকি তখন আমরা এইচটিএমএলআন অর্ডার লিস্ট ব্যবহার করতে পারি । এখন একটা উদাহরণ দিলে ব্যাপারটিআপনাদের কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে ।
এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML List </title>
</head>
<body>
<ul>
</body>
</html>
</ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> PHP </li>
<li>WordPress</li>
কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে ulব্যবহার করেছি । ul মানে হচ্ছে Un Order List এবং প্রতিটি লিস্ট এর জন্য ulএর ভিতরে li ব্যবহার করা হয় ।
এইচটিএমএল টেবিল
আমরা যখন কোন তথ্য উপস্থাপন করি, সাধারণত আমরা টেবিল ব্যবহার করি । এছাড়া, বিভিন্ন ধরনের উপাত্ত উপস্থাপন করার জন্য টেবিল ব্যবহার করে থাকি । একইভাবে, আমরা ওয়েবসাইটে কোন ধরনের উপাত্ত উপস্থাপন করার জন্য এইচটিএমএল টেবিল ব্যবহার করে থাকি । এইচটিএমএল টেবিল কিছুটা জটিল । নতুনদের প্রথম প্রথম বুঝতে অসুবিধা হতে
পারে।
এইচটিএমএল এ টেবিল ব্যবহার করার জন্য এইচটিএমএল <table>...</table> ট্যাগ ব্যবহার করতে হয় । প্ৰথমে চলুন আমরা একটা উদাহরণ দেখে আসি পরে আমরা বিশ্লেষণ করবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table border="1">
<tr>
<th> Serial No. </th>
<th> Class </th>
<th> Students </th>
</tr>
<td> 01 </td>
<td> Class Six </td>
<td> 90 </td>
<tr></tr>
<td> 02 </td>
<td> Class Seven </td>
<td> 90 </td>
<tr> </tr>
<td> 03 </td>
<td> Class Eight </td>
<td> 88 </td>
</table>
<tr> </tr>
<td> 04 </td>
<td> Class Nine </td>
<td> 87 </td>
<tr> </tr>
<td> 05 </td>
<td> Class Ten </td>
<td> 89 </td>
<tr> </tr>
</body>
</html>
কোড বিশ্লেষণঃ
১ । আমরা প্রথমে <table>...</table> ট্যাগ এর মাঝে border ব্যবহার করেছি। কেননা, এখানে আমরা টেবিল এর বর্ডার নির্ধারণ করেছি । এজন্য আমরা বর্ডার ১ দিয়েছি । আপনি বর্ডার ২ ব্যবহার করে কোডটুকু রান করান । তাহলে বিষয়টি পরিষ্কার হয়ে যাবে । আপনি যদি border ব্যবহার না করেন তাহলে বর্ডারবিহীন টেবিল ব্রাউজারে প্রদর্শিত হবে ।
২ । টেবিলের হেডার নির্ধারণ করার জন্য <th>...</th> ব্যবহার করা হয়েছে ।
৩। টেবিলের Row অর্থাৎ সারি নির্ধারণ করার জন্য <tr>...</tr> ব্যবহার করা হয়েছে।
৪। টেবিলের সেল নির্ধারণ করার জন্য <td>...</td> ব্যবহার করা হয়েছে ।
এইচটিএমএল ফর্ম
ওয়েবসাইটের জন্য এইচটিএমএল ফর্ম খুবই গুরুত্বপূর্ণ । কোন ওয়েবসাইট এ নিবন্ধন প্রক্রিয়া যুক্ত করার জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয় । এছাড়া, ওয়েবসাইট এ সার্চ বক্স যুক্ত করার করার জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয় । এইচটিএমএল ফর্ম নতুনদের জন্য প্রথমে কিছুটা কঠিন মনে হতে পারে ।
এইচটিএমএল ফর্ম তৈরি করার জন্য <form>.....</form> ট্যাগ ব্যবহার করা হয় এবং <form>...</form> ট্যাগ এর ভিতরে বেশ কিছু ট্যাগ ব্যবহার করা হয় ।
টেক্সট ফিল্ড
ওয়েবসাইট এ ফর্ম পূরণ করার সময় ভিজিটরকে বেশ কিছু তথ্য (যেমন; নাম, ই-মেইল, ঠিকানা ইত্যাদি) দিয়ে ফর্ম সাবমিট করতে হয় । এসব কাজ আপনি টেক্সট ফিল্ড এর মাধ্যমে করতে পারেন ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<meta charset="UTF-8">
<title> HTML Form </title>
<form>
Name: <input type="text" /> <br />
</body>
</html>
</form>
E-mail: <input type="text" /> <br />
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
পাসওয়ার্ড ফিল্ড
ওয়েবসাইট এ ফর্ম পূরণ করার সময় ভিজিটরকে ইউজার নেম এবং পাসওয়ার্ড দিয়ে ফর্ম সাবমিট করতে হয়। এসব কাজ আপনি পাসওয়ার্ড ফিল্ড এর মাধ্যমে করতে পারেন ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<meta charset="UTF-8">
<title> HTML Form </title>
</body> </html>
<form>
</form>
Password: <input type="password" />
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন।build
রেডিও বাটন
আপনি যদি এমন চান যে ভিজিটর একাধিক বিষয় থেকে একটি বিষয় বাছাই করে ফর্মটি সাবমিট করবে তাহলে রেডিও বাটন ব্যবহার করতে পারেন ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
</body>
</html>
<form>
Priority: <input type="radio"
name="priority" Value="High" /> High <br />
<input type="radio" name="priority"
Value="Medium" /> Medium <br /> <input
type="radio" name="priority" Value="Low" />
Low
</form>
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
চেকবক্স
আপনি যদি এমন চান যে ভিজিটর একাধিক বিষয় থেকে এক বা একাধিক বিষয় বাছাই করে ফর্মটি সাবমিট করবে তাহলে রেডিও বাটন ব্যবহার করতে পারেন ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<title> HTML Form </title>
</body> </html>
<form>
</form>
Department:
<input type="checkbox"
name="department" Value="Sales" /> Sales <input
type="checkbox" name="department" Value="Support"
/> Support
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
ড্রপডাউন
ড্রপডাউন মেনু তৈরি করার জন্য সাধারণত এইচটিএমএল ড্রপডাউন ব্যবহার করা হয় ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<meta charset="UTF-8">
<title> HTML Form </title>
</body>
</html>
<form>
</form>
Marital Status: <select name="Status">
<option> Married </option>
<option> Unmarried </option> </select>
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
টেক্সট এরিয়া
আপনি যদি চান যে ওয়েবসাইটের ব্যবহারকারী কোন ম্যাসেজ অর্থাৎ বার্তা লিখে আপনার কাছে পাঠাবে তাহলে আপনি টেক্সট এরিয়া ব্যবহার করবেন ।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<title> HTML Form </title>
<body>
</body>
</html>
<form>
Massage: <textarea rows="5"
cols="30"></textarea>
</form>
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
সাবমিট বাটন
ওয়েবসাইটের ফর্ম সাবমিট করার জন্য সাবমিট বাটন ব্যবহার করতে হয়।
এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<title> HTML Form </title>
</head>
<body>
<form>
<input type="submit" value="Submit"
/>
</body> </html>
</form>
এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
এখন আমরা একটি এইচটিএমএল ফর্ম তৈরি করবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
</body> </html>
</form>
Name: <input type="text" /> <br />
E-mail: <input type="text" /> <br />
Password: <input type="password" /> <br
/>
Marital Status: <select name="Status">
<option> Married </option>
<option>Unmarried </option>
</select><br />
Priority: <input type="radio"
name="priority" Value="High" /> High <br />
<input type="radio" name="priority"
Value="Medium" /> Medium <br />
<input type="radio" name="priority"
Value="Low" /> Low <br />
Department:
<input type="checkbox" name="department"
Value="Sales" /> Sales
<input type="checkbox"
name="department" Value="Support" /> Support <br
/> Massage: <textarea rows="5"
cols="30"></textarea> <br />
<input type="submit" value="Submit"
/>
কোড কপি না করে, অবশ্যই কোডটুকু নিজের হাতে লিখবেন। কোড কপি করে প্র্যাকটিস করলে আপনারা তেমন কিছু বুঝতে পারবেন না ।
আমরা ওয়েবসাইট এ কপিরাইট, ট্রেডমার্ক ইত্যাদি চিহ্ন ব্যবহার করে থাকি । এসব চিহ্ন হচ্ছে এইচটিএমএল এনটাইটি । এনটাইটি শুরু হয় এমপারসেন্ড (&) চিহ্ন দ্বারা এরপর এনটাইটি নাম লেখা হয় এবং শেষে একটি সেমিকোলন (;) দিতে হয় । এখন আমরা কপিরাইট এর এনটাইটি তৈরি করবো। এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Entity </title>
</head>
<body>
</body> </html>
<p> Copyright © Website Name - All Rights
Reserved. </p>
এইচটিএমএল এনটাইটি এর নাম জানতে গুগল এ সার্চ দিতে পারেন ।
এইচটিএমএল আইফ্রেম
Let's build your career এইচটিএমএল আইফ্রেম বলতে বুঝায় আমাদের এইচটিএমএল ফাইলের একটা নির্দিষ্ট জায়গার মধ্যে অন্য একটা ওয়েবসাইটের কন্টেন্ট প্রদর্শন করানো । অর্থাৎআপনার ওয়েবসাইট এ অন্য একটা,যদি আপনি কখনো এমন চান যে, ওয়েবসাইট এর কন্টেন্ট শো করবে তাহলে এইচটিএমএল আইফ্রেম ট্যাগ ব্যবহার করতে পাড়েন ।
এইচটিএমএল আইফ্রেম ভালোভাবে বুঝাতে আপনাদের এখন একটা উদাহরণ দিচ্ছি । নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head> <body>
<meta charset="UTF-8">
<title> HTML IFrame </title>
</body> </html>
<iframe
src="http://softtech-blog.com"></iframe>
এবার যদি আমি index.html ফাইলটি একটি ওয়েব ব্রাউজারে ওপেন করি, তাহলে দেখবেন সফটটেক ব্লগ ওয়েবসাইটটি প্রদর্শিত হয়েছে।
এখন আপনি চাইলে ফ্রেম বড় কিংবা ছোট করতে পাড়েন । এক্ষেত্রে, আপনাকে height এবং width নামে দুইটি আট্রিবিউট ব্যবহার করতে হবে। যেমন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body> </html>
<meta charset="UTF-8">
<title> HTML IFrame </title>
<iframe src="http://softtech-blog.com"
height="600" width="700"></iframe>
তবে, সব ওয়েবসাইট আইফ্রেম এ ব্যবহার করা যায় না। যেমন, ফেইসবুক, গুগল এসব ওয়েবসাইট আপনি চাইলেও আইফ্রেম ট্যাগ এ ব্যবহার করতে পাড়বেন না। আশা করি, বুঝতে পেড়েছেন।
তৃতীয় অধ্যায়
গত অধ্যায়ে আমরা এইচটিএমএল এর বেশ কিছু ট্যাগ নিয়ে আলোচনা করেছি । এই অধ্যায়ে আমরা এইচটিএমএল ৫ এর বেশ কিছু ট্যাগ নিয়ে আলোচনা করবো ।
এইচটিএমএল হেডার (HTML Header)
একটি ওয়েবসাইট শুরুতেই হেডার অংশ থাকে । ওয়েবসাইট এর হেডার এরিয়া নির্ধারণ করে দেওয়ার জন্য এইচটিএমএল
হেডার ট্যাগ ব্যবহার করা হয় । অর্থাৎ, একটি ওয়েবসাইট এর হেডার এ এক বা একাধিক হেডিং থাকতে পারে, লোগো
থাকতে পারে, মেনু থাকতে পারে । এসব কন্টেন্ট সব সময় এইচটিএমএল হেডার ট্যাগ এর ভিতরে থাকে ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Header </title>
</head>
<body>
</body> </html>
<header>
<h1> SoftTech-Blog </h1>
<h3> Let's Learn Something </h3>
</header>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
এইচটিএমএল নেভ (HTML Nav)
ওয়েবসাইটে মেনু দেওয়ার জন্য এইচটিএমএল নেভ ট্যাগ ব্যবহার করা হয় । এছাড়া, একাধিক লিংক দেওয়া জন্যও এইচটিএমএল নেভ ট্যাগ ব্যবহার করা হয় ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<title> HTML Nav </title>
</body>
</html>
<nav>
</nav>
<a href="http://www.softtech-it.com">
SoftTech-IT </a>
<a href="http://www.softtech-blog.com">
SoftTech-Blog </a>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
এইচটিএমএল সেকশন (HTML Section)
ওয়েবসাইট এক বা একাধিক সেকশন থাকতে পারে । প্রত্যেকটি সেকশন এ এইচটিএমএল সেকশন (HTML Section) ট্যাগ ব্যবহার করা হয় ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head> <body>
</body> </html>
<section>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn.
</p>
</section>
<section>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn.
</p>
</section>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন।
এইচটিএমএল আর্টিকেল (HTML Article )
আমরা যদি কোন পোস্ট লিখতে চাই তাহলে আমরা এইচটিএমএল আর্টিকেল (HTML Article) ট্যাগ ব্যবহার করতে পারি । অর্থাৎ ব্লগ পোস্ট, ফোরাম, গল্প, ইত্যাদি লেখার জন্য এইচটিএমএল আর্টিকেল ট্যাগ ব্যবহার করা হয় ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head>
<body>
</body>
<article>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn.
</p>
</article>
</html>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
এইচটিএমএল ফুটার (HTML Footer)
একটি ওয়েবসাইট শেষে ফুটার অংশ থাকে । ওয়েবসাইট এর ফুটার এরিয়া নির্ধারণ করে দেওয়ার জন্য এইচটিএমএল Footer ট্যাগ ব্যবহার করা হয় । অর্থাৎ, একটি ওয়েবসাইট এর ফুটার এ কপিরাইট তথ্য থাকতে পারে, সাইটম্যাপ থাকতে পারে, যোগাযোগ তথ্য থাকতে পারে । এসব কন্টেন্ট সব সময় এইচটিএমএল ফুটার ট্যাগ এর ভিতরে থাকে ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
</head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
<body>
</body> </html>
<footer>
<p> Copyright © Jihadur Rahman Noyon - All
Rights Reserved. </p>
</footer>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
এইচটিএমএল অডিও (HTML Audio )
ওয়েবসাইট এ অডিও যোগ করার জন্য এইচটিএমএল অডিও ট্যাগ ব্যবহার করা হয় । এইচটিএমএল <audio></audio>
ট্যাগ ভিতরে <source /> ট্যাগ ব্যবহার করতে হয়। <source /> ট্যাগ এ src আট্রিবিউট এ অডিও ফাইলের
এক্সটেন্সানসহ ফাইলের নাম দিতে হবে ।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Audio </title>
</head>
<body>
<audio>
</audio>
</body> </html>
<source src="something.mp3" />
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
এইচটিএমএল ভিডিও (HTML Video)
ওয়েবসাইট এ ভিডিও যোগ করার জন্য এইচটিএমএল ভিডিও ট্যাগ ব্যবহার করা হয় । এইচটিএমএল ভিডিও ট্যাগ ব্যবহার করার নিয়ম অনেকটা এইচটিএমএল অডিও ট্যাগ এর মতই । এইচটিএমএল <video></video> ট্যাগ ভিতরে <source /> ট্যাগ ব্যবহার করতে হয়। <source /> ট্যাগ এ src আট্রিবিউট এ ভিডিও ফাইলের এক্সটেন্সানসহ ফাইলের নাম দিতে
হবে।
বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Video </title>
</head>
<body>
<video>
<source src="something.mp4" />
</body> </html>
</video>
এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করুন ।
0 Comments