আসসালামু আলাইকুম!! আজকের পর্বে স্পেসিফিকভাবে কোন বিষয় নিয়ে আলোচনা হবে না। আজকের পর্বে আলোচনা করব সেই টপিক গুলো নিয়ে যেগুলো আগে ভুল করে ছেড়ে চলে এসেছি। আরো, ভিডিও, অডিও ইত্যাদি কিভাবে যোগ করতে হবে সেটা দেখানো। এবং প্র্যাকটিস করার জন্য কিছু টিপস।।
আর দেরি না করে তাহলে শুরু করে দেই।
HTML Head
আমরা দেখেছি HTML Head এর মাঝে Title ব্যবহার করেছি এবং লিংক ব্যবহার করেছি। এখন আমি আরো কিছু বিষয় দেখাবো।।
HTML Title
আমাদের সাইটের মুল নামটাই হবে Title. আমরা ব্রাউজারের ট্যাবে যে নাম দেখি সেটাই হচ্ছে পেজের টাইটেল। নিচের মতো করে লিখতে হয়।
<!DOCTYPE html> <html> <title>Page Title</title> </html>
HTML Style
আমরা যদি সাইটের সিএসএস ইনলাইন হিসেবে ব্যবহার করতে চাই তাহলে <style> ব্যবহৃত হয়। যেমনঃ-
<style> body {background-color:yellow;} p {color:blue;} </style>
HTML Link
আমরা এক্সট্রানাল সিএসএস বা ফন্ট ব্যবহার করতে চাইলে <link> ব্যবহৃত হয়। যেমনঃ-
<link rel="stylesheet" href="mystyle.css">
HTML Meta
আমাদের সাইটের বিভিন্ন তথ্য কোথায় দেব?? আমরা দেব সেটা Head এর মধ্যে <meta> দিয়ে।
সার্চ ইঞ্জিনে যেন ভাল ভাবে খুজে পাওয়া যায় সেজন্য সাইটের কী-ওয়ার্ড এড করতে হয়। এই কী-ওয়ার্ড গুলো দিবেন content এর মধ্যে। যেমনঃ-
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
সাইটের বিস্তারিত তথ্য নিচের মতো করে দিতে হয়। content এর মধ্যে দিবেন। যেমনঃ-
<meta name="description" content="Free Web tutorials on HTML and CSS">
সাইটের টেক্সট এর কোডিং কোন ভাষায় সেটা বলে দিতে নিচের মতো দিতে হয়।
<meta charset="UTF-8">
সাইটের অথর এর নাম দিতে হয় নিচের মতো করে। content এর মধ্যে আপনার নাম দিবেন। যেমনঃ-
<meta name="author" content="Hege Refsnes">
এখন আপনি যদি চান আপনার সাইট ৩০ সেকেন্ড পর পর অটোমেটিক রিফ্রেশ হবে। তাহলে নিচের মতো দিতে হয়। এখানে content এর মধ্যে যে সংখ্যা দিবেন থিক তত সেকেন্ড পর পর অটোমেটিক রিফ্রেশ হবে।
<meta http-equiv="refresh" content="30">
HTML Script
আমরা যদি আপনার ওয়েব পেজে ইন্টারনাল জাভাস্ক্রিপ্ট ব্যবহার করতে চান তাহলে সেটা <script> ট্যাগের মধ্যে করতে হবে। এটার ইন্ড ট্যাগ আছে।
HTML Base Element
ধরুন, আমাদের পেজটা একটা গ্যালারী। মানে, এখানে অনেক ছবি আছে। এবং সেই ছবি গুলো একটা image নামের ফোল্ডারে রেখেছি। প্রায় ১০০/২০০ ছবি আছে এই পেজে। এখন প্রত্যেকটা ছবির জন্য বড় url বা এড্রেস লেখা একটা ঝামেলা। মানে, বারাবার বড় বড় এড্রেস লিখে লিংক করতে হবে।
তাই, আমরা কি করব একটা বেজ এড্রেস তৈরি করব। এবং পরবর্তীতে যখন ছবি যুক্ত করব তখন শুধু ইমেজ এবং ফরম্যাট দিলেই হবে।।
নিচের মতো একটা বেজ এড্রেস তৈরি করে সেটা <head> এর মধ্যে রেখে দিলেই হবে।
<base href="http://www.w3schools.com/images/" target="_blank">
HTML Media
আমরা আমাদের সাইটে অডিও, ভিডিও যোগ করতে পারি। এখন এই মিডিয়া গুলোর কোনটা দিলে ভালো হয় বা সাইটের মান ভালো হয় সেটা দেখব।
Video Format:–
নতুন HTML5 এবং আপডেটেড ব্রাউজারে রেকোমেন্ড করা হয় .mp4 ফরম্যাটের ভিডিও। তাই সবসময় চেষ্টা করবেন এই ফরম্যাটের ভিডিও আপলোড দিতে বা এড করতে।
Audio Format:–
নতুন HTML5 এবং আপডেটেড ব্রাউজারে রেকোমেন্ড করা হয় .mp3 ফরম্যাটের অডিও। তাই সবসময় চেষ্টা করবেন এই ফরম্যাটের অডিও আপলোড দিতে বা এড করতে।
HTML Video
আমাদের সাইটে যদি আমরা ভিডিও এড করতে চাই তাহলে <video> এলিমেন্ট এর মাধ্যমেই তা সম্ভব।
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
এখানে video ট্যাগের এট্রিবিউট width এবং height এর মাধ্যমে আমরা ভিডিও এর সাইজ ঠিক করে দিয়েছি। আর controls লিখে দিয়ে যেন সেটা ইউজার কন্ট্রোল করতে পারে। controls কেটে দিয়ে দেখুন কি হয়।
আর ওই লেখাটা দিয়েছি যদি কখনো কোন কারনে ভিডিও না আসে বা না সাপোর্ট করে তাহলে যেন এই লেখাটা দেখায়। এটা ওই ইমেজের alt এর মতো অনেকটা।।
আর তারপর <source> দিয়ে ভিডিও এড করেছি। source এর src এট্রিবিউট এর মধ্যে লিংক দিতে হয় ভিডিও এর যেমনটা ইমেজ এর ক্ষেত্রে দেয়া হয়। তারপর দেয়া হয় type এটা দিয়ে ব্রাউজার কে বোঝানো হয় যে এটা কোন টাইপের ভিডিও।
Video Autoplay
আমরা যদি চাই যে ভিডিও অটোমেটিক চালু হয়ে যাবে এবং এটার কোন কন্ট্রোল ইউজার এর কাছে থাকবে না তাহলে controls এর জায়গায় autoplay দিলেই হবে। যেমনঃ-
<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
HTML Audio
আমাদের সাইটে যদি আমরা অডিও এড করতে চাই তাহলে <audio> এলিমেন্ট এর মাধ্যমেই তা সম্ভব।
<audio controls><source src="horse.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>
এখানে Audio ট্যাগের এট্রিবিউট width এবং height এর মাধ্যমে আমরা অডিও এর সাইজ ঠিক করে দিয়েছি। আর controls লিখে দিয়ে যেন সেটা ইউজার কন্ট্রোল করতে পারে। controls কেটে দিয়ে দেখুন কি হয়। আর ওই লেখাটা দিয়েছি যদি কখনো কোন কারনে অডিও না আসে বা না সাপোর্ট করে তাহলে যেন এই লেখাটা দেখায়। এটা ওই ইমেজের alt এর মতো অনেকটা।।
আর তারপর <source> দিয়ে অডিও এড করেছি। source এর src এট্রিবিউট এর মধ্যে লিংক দিতে হয় অডিও এর যেমনটা ইমেজ এর ক্ষেত্রে দেয়া হয়। তারপর দেয়া হয় type এটা দিয়ে ব্রাউজার কে বোঝানো হয় যে এটা কোন টাইপের অডিও।
HTML Plug-Ins
আমরা শুধু ভিডিও বা অডিও না অন্যান্ন সাপোর্টেড ফাইলও এড করতে পারি। যেমনঃ- আমরা পেজে Flash Video এড করতে পারি। আমরা বিভিন্ন ফ্ল্যাশ ভিডিও যেগুলো দেখি মানে, ইন্টারেক্টিভ ই-বুক বা এরকম কিছু বিষয়।
নিচের মতো <object> ব্যবহার করে আমরা করতে পারি।
<object width="400" height="50" data="bookmark.swf"></object>
এখানে data এট্রিবিউট এর মধ্যে অব্জেক্ট টার লিংক দিয়ে দিতে হবে।
HTML Youtube Video
আমরা Iframe এর সাহায্যে ইউটিউব এর ভিডিও এড করতে পারি। Iframe এর কাজ গত পর্বে দেখানো হয়েছিল। নিচের মতো দিলেই ইউটিউব এর ভিডিও এখানে চলে আসবে।
<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"> </iframe>
scr এর জায়গায় আপনার ভিডিও লিংক দিবেন।
এই যা!! আপনি তো HTML শিখে ফেলেছেন। এখন কি হবে?? কারণ, ৭ দিনে শেখার কথা আপনি তো মাত্র ৬ দিনেই শিখে ফেললেন। বিশ্বাস না হলে দেখুন আমি মাত্র ৬টা পর্ব দিয়েছি।
হ্যা, আসলে আল্লাহর রহমতে আমরা পেরেছি। এজন্য আল্লাহর কাছে শুকরিয়া আদায় করি। আলহামদুলিল্লাহ!!
কিন্তু, এর পরের পর্ব টা কি দেয়া যায় বলুন তো??
আমি ততক্ষণ পরবর্তী পোস্ট করব না যতক্ষণ আপনি কমেন্টে বলবেন না যে পরবর্তী পোস্টে কি লিখব।।
আমি ভেবেছি একটা প্রোজেক্ট করব শুধু HTML দিয়ে একটা পুর্নাঙ্গ সাইট তৈরির। আর এখন কিভাবে প্র্যাক্টিস করবেন এবং আরো কিছু টিপস দেবো।
নাকি, আরো কিছু চাই সেটা বলতেই পারেন কমেন্টে।।
ধন্যবাদ!! আমি শাহরিয়ার আহমেদ শোভন।।
আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz
15 thoughts on "৭ দিনে শিখুন HTML – ৬ষ্ঠ দিন — পর্ব ০৬"