⟺ CITY CASH ⟺
নিচের থেকে অ্যাপ টা ডাউনলোড করে নিন
👇👇👇👇👇👇👇👇👇👇👇
Saturday, March 30, 2019
কিছু কিছু হ্যাকার যখন ওয়েব সাইট ডিফেস করে সেখানেও একই অবস্থা।এই যেমন- যেই জায়গাতে লিখা থাকার কথা hacker তার বদলে সেখানে লেখা h4x০r! কেমন যেন অস্বাভাবিক..তাই না? অথচ leet জানা থাকলে সহজেই বোঝা যায়।
L33T কী?
…………………………………………………………………………………………………………………………………………………………….leet কে leetspeak বা l33t বা 1337 -ও বলে। এটি আসলে ইংরেজি শব্দগুলোরই কিছুটা বিকৃত ও সংক্ষিপ্ত রূপ। সহজ কথায় বলতে গেলে এটির আর্বিভাব ঘটেছে ১৯৮০ সালের দিকে। সর্বপ্রথম হ্যাকাররা তাদের ফোরাম বা ব্লগে এই leet ব্যবহার শুরু করে যেন তারা ছাড়া অন্য কেউ বুঝতে না পারে। তবে আজকাল বিভিন্ন গেমেও এই leet ঢুকে পড়েছে। শুধু তাই নয় চ্যাটিংয়েও এটি আমরা প্রায় নিয়মিত ব্যবহার করি। চ্যাটিংয়ে আমাদের খুব পরিচিত শব্দ
L0L (laughing out loud), 0MG (oh my gosh) ইত্যাদিও leet থেকেই এসেছে। আগে শুধু হ্যাকার, গেমাররা এটি ব্যবহার করলেও এখন স্বাভাবিকভাবে অনেক ক্ষেত্রেই ব্যবহার করা হয়। তাই চ্যাটিংয়ে অন্যদের সাথে পাল্লা দিয়ে চলতে এবং যদি ভবিষ্যতে হ্যাকার হওয়ার ইচ্ছা থাকে তাহলে আপনার এটা অবশ্যই জানা থাকতে হবে কারণ সব ভালো হ্যাকাররাই leet জানে।
সাইটটিতে যেতে এখানে ক্লীক করুন।
leet শিখতে চান?
শিখতে চাওয়া মানে একেবারে তো আর পুরোপুরি আয়ত্তে আনা না…একটু ভালো ধারনা থাকলেই হল। এই leet ইংরেজি ভাষাই শুধু কিছু কিছু বর্ণের পরিবর্তে ভিন্ন বর্ণ বা সংখ্যা স্থান দখল করেছে। যেমন- s কে লেখা হয় 5, Tএর বদলে 7 ইত্যাদি। এইরকম ইংলিশ letter এর পরিবর্তে যেইসকল leet বসেছে-এইগুলো বেশি ব্যবহৃত হয়। তাই এগুলো মনে রাখার চেষ্টা করবেন। এইসব মনে রাখতে
পারলেই leet অনেকাংশে আয়ত্তে আনা যাবে। এছাড়াও leet এর আরও কিছু সংকেত আছে। complex বাক্য বানালে ঐসব use করা হয়-
কিছু কিছু শব্দও আছে এরকম-
| at | @ | ck | xor |
| the | teh | you | joo or u |
| look at | peep | kill | frag |
| own | pwn | that | dat |
| sleep | reboot | greater than | > |
| newbie | noob | why | y |
| be | b | are | r |
| and | & | dude | d00d |
| yo | jo | hacker | h4xor |
| hello | ping | to/two | 2 |
| with | wit | friends | n00bz |
তারপর দেখুন আপনার অ্যাকাউন্টের ভাষা সব চেঞ্জ হয়ে গিয়েছে।
তবে কোনো বাক্য বুঝতে না পারলে এবং চট করে কোনো বাক্যকে leet-এ পরিণত করতে আপনাকে সাহায্য করতে পারে বিভিন্ন অনলাইন leet-english এবং english-leet ট্রান্সলেটর। তেমনি একটি হল এটি। এখান থেকে eng ও leet কনভার্ট করতে পারবেন।
তবে কোনো সাইটে-টাইটে যাওয়ার ঝামেলায় যেতে না চাইলে মাত্র কয়েক কিলোবাইটের এই ট্রান্সলেটরটি ডাউনলোড করতে পারেন। এখান খেকে eng-leet এবং leet-eng কনভার্ট করতে পারবেন।
পোর্টেবল তাই ব্যবহার করাও সোজা। তো, চর্চা করতে থাকুন। আমি আজকের মত এখানেই বিদায় নিই। সবাই ভালো থাকবেন…ধন্যবাদ।
😎😎আজ আমরা শিখব HTML বেসিক এবং প্রোগ্রাম লেখার পদ্ধতি ।
চলুন শুরু করি ...
HTML বেসিক
যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।আমরা windows এর ডিফল্ট Notepad টাই ইউজ করব ।
Notepad ওপেন করতে, start menu তে ক্লিক করে notepad লিখে সার্চ দিন, সিঙ্গেল ক্লিকে ওপেন করুন ।
প্রোগ্রাম লেখার পদ্ধতি
HTML প্রোগ্রামের মৌলিক অংশসমুহঃ
<html>
<head>
<title> www.galibsforum.blogspot.com</title>
</head>
<body>This is my first web page.Now I'm learning HTML.
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখুন । (কপি-পেস্ট করবেন না, এতে আপনি শিখতে পারবেন না)
যাদের কম্পিউটার নেই তাদের চিন্তার কোনো কারন নাই,
মোবাইল দিয়ে ও html চর্চা করতে পারেন আপনি
সেজন্যে লাগবে একটি অ্যাপ
HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ
প্রোগ্রামের মধ্যে <> এবং < /> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body এগুলোকে Keyword বলে এবং <> বা < /> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে ট্যাগ বলা হয়। যেমন <head> অর্থ head ট্যাগ। HTML এ দুই ধরনের ট্যাগ রয়েছে , <> চিহ্ন ও keyword নিয়ে গঠিত ট্যাগকে শুরু ট্যাগ এবং < /> চিহ্ন ও keyword নিয়ে গঠিত ট্যাগকে শেষ ট্যাগ বলে । যেমন < title> অর্থ title শুরু ট্যাগ এবং </title> অর্থ title শেষ ট্যাগ।মনে রাখবেন, ট্যাগ শুরু করলে অবশ্যই সেটা close করতে হবে অর্থাৎ, শেষ ট্যাগ দিতে হবে ।
তবে কিছু কিছু ট্যাগের শেষ ট্যাগ নেই । সেটা নিয়ে আমরা পরবর্তীতে আলোচনা করব ।
<html> বা html ট্যাগ:
HTML এ প্রোগ্রাম লেখার জন্য সমস্ত code কে <html> </html> এর মাঝে লেখা হয়।<head> বা head ট্যাগ:
<head></head> এর ভেতরে <title> </title> ট্যাগ লেখা হয় যার মাধ্যমে ওয়েবসাইটের title বা শিরোনাম প্রদর্শনের ব্যবস্থা করা হয়। এই code এ title হিসেবে www.galibsforum.blogspot.com লেখা হয়েছে যা ব্রাউজারের title bar এ দেখা যাচ্ছে।<body> বা body ট্যাগ:
<body> বা body ট্যাগ খুবই গুরুত্বপূর্ণ। একটি ওয়েব সাইটের মূল Content সমূহ Body ট্যাগের মধ্যে অবস্থান করে । <body></body> ট্যগের মধ্যেই বিভিন্ন Text , Image, Table ইত্যাদি ফরমেটিং এর জন্য বিভিন্ন ট্যাগ সমূহ লেখা হয় । এই code এ <body></body> ট্যগের মধ্যে This is my first web page.Now I'm learning HTML. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।ধন্যবাদ সাথে থাকার জন্য, দেখা হবে পরবর্তী পর্বে ।
HTML কি এবং এর ইতিহাস
আজ থেকে HTML এর ওপর ধারাবাহিক টিউটোরিয়াল দেওয়া হবে, সবার কথা বিবেচনা করে এই টিউটোরিয়ালগুলো সহজ বাংলায় লেখার চেষ্টা করব-যাতে খুব সহজেই এটি আপনাদের আয়ত্তে আসে ।
প্রথমেই জেনে নিই HTML কি ?
HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Languageবলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।সহজ কথায় বলতে গেলে, আপনি আপনার তথ্যসমূহ ওয়েবপেজে প্রদর্শন করতে চাইলে, কিভাবে প্রদর্শন করার একটি পদ্ধতি হল HTML ।
HTML এর ইতিহাস
HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।
আজ এই পর্যন্তই । দেখা হবে পরবর্তী পর্বে ।
।|। ধন্যবাদ ।|।
আজ এই পর্যন্তই । দেখা হবে পরবর্তী পর্বে ।
।|। ধন্যবাদ ।|।
Friday, March 29, 2019
বর্তমানে একজন অতি সাধারণ মানুষেরও একটি নিজস্ব ওয়েব সাইট থাকে।
এইচটিএমএল এর মাধ্যমে আপনি আপনার এই নিজস্ব ওয়েবসাইটটি তৈরি করতে পারবেন।
আমাদের এই টিউটোরিয়ালটি আমরা খুবই সহজভাবে উপস্থাপন করেছি যেন আপনিও খুব সহজেই পুরো এইচটিএমএল শিখতে পারেন এবং নিজের ওয়েবসাইটটি তৈরি করতে কোন ডেভেলপার ভাড়া না করে নিজেই করতে পারেন।
এইচটিএমএল শেখা খুবই সহজ এবং আশা করি আপনি আমাদের এই টিউটোরিয়ালটি উপভোগ করবেন।
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
উদাহরণ
<!DOCTYPE html> <html> <head> <title>এইচটিএমএল উদাহরণ</title> </head> <body> <h1>এটি একটি হেডিং</h1> <p>এটি একটি প্যারাগ্রাফ।</p> </body> </html>
Copy
ফলাফল
এইচটিএমএল পরিচিতি
ভার্সনসনএইচটিএমএল১৯৯১এইচটিএমএল(২.০)১৯৯৫এইচটিএমএল(৩.২)১৯৯৭এইচটিএমএল(৪.০১)১৯৯৯এক্সএইচটিএমএল২০০০এইচটিএমএল(৫)২০১৪
এইচটিএমএল
ওয়েব ডকুমেন্টকে বর্ণনা করার জন্য এইচটিএমএল হলো একটি মার্কআপ ল্যাঙ্গুয়েজ।
HTML এর পূর্নরূপঃ Hyper Text Markup Language।
মার্কআপ ল্যাঙ্গুয়েজ বলতে একগুচ্ছ মার্কআপ ট্যাগকে বুঝায়।
এইচটিএমএল ট্যাগ দিয়ে এইচটিএমএল ডকুমেন্ট তৈরি করা হয়।
এইচটিএমএল পেজের গঠন
নিচে একটি এইচটিএমএল পেজের গঠন দেখানো হলোঃ
<html>
<head>
<title>পেজ টাইটেল</title>
</head>
<body>
<h3>ডকুমেন্ট হেডিং</h3>
<p>এইচটিএমএল প্যারাগ্রাফ।</p>
<img src="URL" alt="Some_text" style="width:100px; height:1000px;">
</body>
</html>
শুধুমাত্র <body> সেকশনের কন্টেন্ট ব্রাউজারে প্রদর্শিত হয়।
একেবারেই সাধারণ একটি এইচটিএমএল ডকুমেন্ট
উদাহরণ
<!DOCTYPE html> <html> <head> <title>পেজ টাইটেল</title> </head> <body> <h3>স্যাট একাডেমী</h3> <img src="../images/satt.png" alt="SATT Academy" height="142" width="142"> </body> </html>
Copy
ফলাফল
উপরের উদাহরণের বিস্তারিত বর্ণনাঃ
ডকুমেন্টের টাইপ সেট করতে <!DOCTYPE html> ডিক্লেয়ার করা হয়। এটি এইচটিএমএল এর সর্বশেষ ভার্সন HTML5 কে নির্দেশ করে।
<html> এবং </html> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টকে বর্ণনা করে।
<head> এবং </head> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টের জন্য অতিরিক্ত তথ্য সরবরাহ করে।
<title> এবং </title> ট্যাগের মাঝের টেক্সট ডকুমেন্টের টাইটেল/নাম সেট করে।
<body> এবং </body> ট্যাগের মাঝের কন্টেন্টগুলো ওয়েব পেজে প্রদর্শিত হয়।
<h3> এবং </h3> ট্যাগ ডকুমেন্টের একটি হেডিং/শিরোনাম তৈরি করে। হেডিং ট্যাগ কন্টেন্ট এর গুরুত্ব আরোপ করে।
<img> ট্যাগ এর মাধ্যমে ব্রাউজারে বিভিন্ন টাইপের ইমেজ/চিত্র প্রদর্শিত হয়।
এইচটিএমএল ট্যাগ
এইচটিএমএল ট্যাগ সচরাচর জোড়ায়-জোড়ায় থাকে। যেমন <p> এবং </p>।
জোড়ার প্রথম ট্যাগকে ওপেনিং ট্যাগ এবং দ্বিতীয় ট্যাগকে ক্লোজিং ট্যাগ বলা হয়।
ক্লোজিং ট্যাগকে ওপেনিং ট্যাগের মতই লেখা হয়, ক্লোজিং ট্যাগের ক্ষেত্রে ট্যাগের নামের আগে শুধুমাত্র একটি ফরওয়ার্ড স্ল্যাশ(/) দিতে হয়।
<!DOCTYPE>ডিক্লেয়ারেশন
<!DOCTYPE> ডিক্লেয়ারেশন ডকুমেন্টের টাইপ সেট করে এবং একটি ওয়েব পেজকে সঠিকভাবে ব্রাউজারে দেখাতে সাহায্য করে।
যেকোনো ওয়েব ডকুমেন্টের এটাই প্রথম ট্যাগ অর্থাৎ সকল এইচটিএমএল ট্যাগের পূর্বে এই ট্যাগটি শুধুমাত্র একবারই লিখতে হয়।
বিভিন্ন ধরনের ডকুমেন্ট টাইপ ও ভার্সন রয়েছে। তাই ওয়েব পেজকে সঠিকভাবে দেখানোর জন্য ব্রাউজারকে টাইপ ও ভার্সন দুটিই জানাতে হয়।
DOCTYPE ডিক্লেয়ারেশন কেস-সেন্সিটিভ নয়। এতে ছোট এবং বড় উভয় ধরনের অক্ষরই গ্রহনযোগ্য।
<!DOCTYPE html> <!doctype HTML>
Copy
এইচটিএমএলের বিভিন্ন ভার্সনে <!DOCTYPE>ডিক্লেয়ারেশনঃ
এইচটিএমএল(৫)
<!DOCTYPE html>
Copy
এইচটিএমএল(৪.০১)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Copy
এক্সএইচটিএমএল(১.০)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy
Thursday, March 28, 2019
★★★ আপনাদের মধ্যে যারা Html শিখতে চাচ্ছেন এবং যাদের আগ্রহ আছে শুধু মাত্র তারাই এই অ্যাপ টা দিয়ে প্রাক্টিস করবেন ।
DOWNLOAD NOW
Wednesday, March 27, 2019
যা জানবো...
ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। এখান থেকে আমরা HTML এ ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করার পদ্ধতি সম্পর্কে বিস্তারিত জানতে পারব।
ফ্লাস সংযোজন
ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে অডিও এবং ভিডিও এর মত সহজেই ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করা যায় ।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা flash নামে folder নিতে হবে এর মধ্যে flash.swf নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<center>
<embed src="flash.swf" width="250" height="240">
</embed>
</center>
</body>
</html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<center>
<embed src="flash.swf" width="250" height="240">
</embed>
</center>
</body>
</html>
ডেক্সটপে তৈরি করা flash folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ফ্লাস যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।<embed src="flash.swf" width="250" height="240">
</embed>
</embed>
src="flash.swf" এখানে src="…………." এর মধ্যে ফ্লাস ফাইলের লিংক যুক্ত করা হয়।
width="250" height="240" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ফ্লাস এনিমেশনের আকৃতি নির্ধারণ করা হয়।
নির্দেশনা:
নির্দেশনা: যদি ওয়েব পেজে ফ্লাস এনিমেশন প্রদর্শিত না হয় তাহলে flash player অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন
।
।
জানবো...
সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম।এখান থেকে আমরা HTML এ ভিডিও ফাইল যুক্ত এবং নিয়ন্ত্রণ করার পদ্ধতি সম্পর্কে বিস্তারিত জানতে পারব।
ভিডিও সংযোজন
সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে, এবং ব্যবহারকারীরা এ সকল ঘটনার বাস্তব চিত্র দেখা, এবং জানার পাশাপাশি প্রয়োজনে সংগ্রহ করে রাখতে পারছেন। বর্তমানে ভিডিও শুধু মানুষের বিনোদন এবং বাস্তব ঘটনা প্রকাশের মাধ্যমই নয়, এটি শিক্ষার অন্যতম বাহনে পরিণত হয়েছে।
অসংখ্য শিক্ষামূলক ওয়েব সাইট বিভিন্ন বিষয়ের উপর প্রতিদিন নতুন নতুন টেক্সট ভিত্তিক টিউটোরিয়ালের পাশাপাশি ভিডিও টিউটোরিয়াল প্রকাশ করছে। যা মানুষকে পৃথিবীর যে কোন প্রান্ত থেকে শুধুমাত্র শেখা এবং জানার সুযোগই সৃষ্টি করছে না, প্রশ্ন বিনিময় এবং আলোচনার মুক্ত প্লাটফর্ম তৈরির মাধ্যমে পরিপূর্ণ শিক্ষা বিস্তারেও ভুমিকা রাখছে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই ভিডিও যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা video নামে folder নিতে হবে এর মধ্যে video.wmv নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.otgdeveloper.cf</title>
</head>
<body >
<p>
<center>
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true" loop="false" >
</embed>
<h3 style="color:#F00">Click the play button and enjoy video.</h3>
</center>
</p>
</body>
</html>
<head>
<title> www.otgdeveloper.cf</title>
</head>
<body >
<p>
<center>
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true" loop="false" >
</embed>
<h3 style="color:#F00">Click the play button and enjoy video.</h3>
</center>
</p>
</body>
</html>
ডেক্সটপে তৈরি করা video folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ভিডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true">
</embed>
autostart="false" controller="true">
</embed>
src="video.wmv" এখানে src="…………." এর মধ্যে ভিডিও ফাইলের লিংক যুক্ত করা হয়।
height="344" width="300" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ভিডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।
controller="true" এর মাধ্যমে ওয়েব পেজে ভিডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller="……….." এর মধ্যে true লেখা হয় তাহলে ভিডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে ভিডিও প্লেয়ার প্রদর্শিত হবে না।
loop="false" এর মাধ্যমে ভিডিও ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।
autostart="false" এর মাধ্যমে ভিডিও ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
নির্দেশনা:
যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।
যা জানবো...
কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। এখান থেকে আমরা HTML অডিও ফাইল যুক্ত এবং নিয়ন্ত্রণ করার পদ্ধতি সম্পর্কে বিস্তারিত জানতে পারব।
অডিও সংযোজন
কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়। পূর্ব প্রস্তুতি
ডেক্সটপে একটা audio নামে folder নিতে হবে এর মধ্যে audio.mp3 নামে save করা একটা অডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<p>
<center>
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
<h3 style="color:#F00">Click play button and enjoy music.</h3>
</center>
</p>
</body>
</html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<p>
<center>
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
<h3 style="color:#F00">Click play button and enjoy music.</h3>
</center>
</p>
</body>
</html>
ডেক্সটপে তৈরি করা audio folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
অডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
controller="true" loop="false" autostart="false">
</embed>
src="audio.mp3" এখানে src="…………." এর মধ্যে অডিও ফাইলের লিংক যুক্ত করা হয়।
height="35" width="300" এর মাধ্যমে ব্রাউজারে প্রদর্শিত অডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।
controller="true" এর মাধ্যমে ওয়েব পেজে অডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller="……….." এর মধ্যে true লেখা হয় তাহলে অডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে অডিও প্লেয়ার প্রদর্শিত হবে না।
loop="false" এর মাধ্যমে audio ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।
autostart="false" এর মাধ্যমে audio ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
নির্দেশনা:
যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে QuickTime Player ইন্সটল করে নিন অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।
যা জানবো...
HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি।জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়।এখান থেকে আমরা HTML এ স্ক্রিপ্ট যুক্ত করার পদ্ধতি সম্পর্কে জানতে পারব।
স্ক্রিপ্ট
HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। এর মাধ্যমে ওয়েব পেজে লোকাল টাইম প্রদর্শন, সময় দিন তারিখ প্রদর্শন, ব্রাউজার চিহ্নিত করা, সময় এবং ইভেন্ট এর উপর ভিত্তি করে ব্যবহারকারীকে কোন বিশেষ বার্তা প্রদর্শন করা সহ বিভিন্ন ধরণের আকর্ষণীয় এবং গুরুত্বপূর্ণ কাজ করা সম্ভব হয়।
জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.tutohost.com</title>
<head>
<title> www.tutohost.com</title>
<script type="text/javascript">
function show_alert()
{
alert("Welcome to www.tutohost.com");
}
</script>
</head>
<body bgcolor="#009933" >
<input type="button" style="margin-left:150px; width:100px; height:50px; font-size:18px; color:#F00" onclick="show_alert()" value="Click Me" />
</body>
</html>
function show_alert()
{
alert("Welcome to www.tutohost.com");
}
</script>
</head>
<body bgcolor="#009933" >
<input type="button" style="margin-left:150px; width:100px; height:50px; font-size:18px; color:#F00" onclick="show_alert()" value="Click Me" />
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozila Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
যদি Click Me বাটনটিতে ক্লিক করা হয় তাহলে একটি এলার্ট বক্সে Welcome to www.otgdeveloper.cf লেখাটি দেখা যাবে
।
যা জানবো...
যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়। এখান থেকে আমরা মেটা ট্যাগ সম্পর্কে বিস্তারিত জানতে পারব।
মেটা
একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। একটি ওয়েব পেজ যেন সহজেই সার্চ ইন্জিন খুজে পায় এ জন্য ওয়েব প্রোগ্রামারদের যে কাজটি করতে হয়, তাকে বলা হয় সার্চ ইন্জিন অপটিমাইজেশন। যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়।
http://www.otgdeveloper.cfপেজটির মেটা ট্যাগে লেখা আছে….
<meta name="description" content="এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।" />
<meta name="keywords" content="এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" />
প্রথমে পেজের টাইটেল, তারপর লিংক এবং এর পর আছে "এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।"
যা <meta name="description" content="……………………………………." /> এর মধ্যে লেখা আছে।
<meta name="keywords" content="……………………………………." /> এর মধ্যে লেখা আছে "এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" একে কি ওয়ার্ড বলা হয়।
আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়
<meta name="keywords" content="……………………………………." /> এর মধ্যে
সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।
<meta name="author" content="অসীম কুমার" />
লেখকের নামকে সার্চ ইন্জিনে সাবমিট করার জন্য <meta name="author" content="……………"/> ব্যবহার করা হয়।
ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।
<META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.otgdeveloper.cf">
উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.otgdeveloper.cf পেজটি একবার করে রিফ্রেস হবে।
