সবাই আশা করি ভালই আছেন। আপনাদের খুব ভালোবাসি তাই কিছু শেখার জন্য এবং আপনাদের কিছু উপহার দেবার জন্য বার বার ফিরে আসি এইখানে। এই টিউন টা আমার কালকে করার প্লান ছিল, কিন্তু লোড সেডিং এর জন্য করতে পারি নাই। যাই হোক কাজের কথাই আসবো এখন। আমার আজকের এই টিউন টা প্রধানত তাদের জন্য যারা html শিক্ষার্থী । অনেকেই বুঝতে পারে না কোথা থেকে শুরু করা যাবে। কিভাবে শেখা যাবে, কবে প্রফেশনাল হবো। এমনকি অনেকে এমন আছে যারা জানে না notepad এ ট্যাগ লেখার পর শেগুলাকে কিভাবে সেভ করবো। এটা জানার জন্য আমার ২ টা ফেসবুক বন্ধু আমাকে ফোন করেছিলো। তারপরও তারা জিনিসটা বুঝতে পারে নাই। এই টিউন টা তাদের জন্য যারা ওয়েব ডিজাইন ছাড়া আমার কিছু বারতি কথা বা বকবকানি শুনতে চান-----
প্রথমে আমাদের গাইডলাইন হিসাবে w3school ও webcoachbd এর সাহায্য নিতে হবে যেটা আমি আমার প্রথম টিউন এ প্রকাশ করেছিলাম। আমার প্রথম টিউন দেখতে https://www.techtunes.io/web-design/tune-id/133763 যান। প্রথমত আপনাকে webcoachbd ভালভাবে পরে নিতে হবে। তারপর w3school । মনে রাখবেন আপনি একটা শিল্প শিখতে চান, যদি আপনি শুধু টাকা কামাই করার জন্য ওয়েব ডিজাইন শিখতে চান তাহলে ভুল করবেন । আমার মতে ওয়েব ডিজাইন একটা শিল্প, এটাতে যদি আপনি আনন্দ পান তবে শিখতে পারবেন।
কিভাবে শিখবোঃ আপনি যেহেতু ফাসবুক, গুগোল, নেট ব্যাবহার করেন , সেহেতু আপনি নানা ধরনের ওয়েব সাইট এ ভিসিট করেন। সব ওয়েব সাইট কি একই রকম না আলাদা এটা আপনি নিজেও ভাল জানেন। আপনাকে আর একটু ভালভাবে চোখ রাখতে হবে ওয়েব সাইট গুলাতে। শুধু সাইট এর সার্ভিস নেয়ার জন্য সেগুলাতে ভিসিট করবেন না। সার্ভিস নেয়ার সাথে সাথে আপনি বুঝতে চেষ্টা করবেন এগুলা কিভাবে করে। আমার কথা বলি, আমি ২০১১ সালের নভেম্বর মাসের ১৩ তারিখে মোডেম নেই। তো আমি তো নতুন ফেসবুক আমাকে খুলে দেয় আমার এক বড়ভাই। তারপর থেকে নেট চালানো আমার সুচনা হয়। আমি একদিন একটা সাইট এ ভিসিট করতেছি তখন আমি মাউস এর ডান বাটন এ ক্লিক করলাম কিছু তথ্য কপি করার জন্য । সেখানে দেখতে পেলাম “view page source” নামে একটা অপশন। আমি সেটা বুঝতে চেষ্টা করলাম। আমি এটার মিনিং করলাম এভাবে “view মানে দেখ, page পাতা, source উপাদান/উৎপত্তি । আমি ভাবলাম পেজ দেখতেছি যখন তো পেজ এর উপাদান দেখতে কি সমস্যা তাই আমি তাতে ক্লিক করি। এবং কিছু হাবি জাবি আজাইরা লেখা দেখতে পাই। তখন আমার মাথাতে এগুলা ধুকে নি , যে এগুলা কি। আমার নেট নেবার ১৫/২০ দিন পর এটা ঘটে আমার জীবনে। আর আমার ফেসবুক এ অধিকাংশ বন্ধু ছিল যারা ওয়েব ডিজাইন এবং ওদেস্ক এর সাথে যুক্ত। তারা নানা ধরনের টিউটোরিয়াল শেয়ার করতো। এভাবে আমি techtuens এর দেখা পাই। এভাবে চলতে চলতে আমি আজ থেকে ২ মাস আগে ওয়েব ডিজাইন সম্পর্কে ভাল কিছু জানতে পারি , ওয়েব ডিজাইন আসলে কি এটা আমি আজ থেকে ২ মাস আগে জানতে পারি। আমাকে একজন বলেছিল “আমি কিভাবে ওয়েব ডিজাইন শিখতে পারব”? আমি তাকে উত্তর দিয়াছিলাম যে “ এটা আপনার উৎসাহ এর উপর নির্ভর। আপনার শেখার আগ্রহ যত বেশি আপনি তত শিখতে পারবেন”। উনি হেসে উরে দেন আমার কথা। আপনি যদি শিখতে চান তাহলে আমি বলবো আপনি নিজের মন কে সংযত করুন এবং শেখার প্রতি আগ্রহী হন। আপনি যদি আগ্রহী না হন তাহলে আমি চেলেঞ্জ করব দুনিয়ার কোন ওয়েব ডিজাইন মাস্টার আপনাকে সেখাতে পারবে না।
আমি যেভাবে শিখিঃ আমি মোটামুটি শিখছি html এখন এগুলা আমি চর্চা করতেছি। কথা হল আপনি কিভাবে প্রাকটিস করবেন? আমি আগেই বলেছি এটা একটা শিল্প। শিল্প মানে হল আগে আপনাকে নিজের মনের মত একটা ডিজাইন করতে হবে তারপর সেটাকে বাস্তবে রুপ দিতে হবে। ঠিক তেমনি আপনাকে প্রথমে নিজের মনের মত একটা ডিজাইন করতে হবে তারপর html এর মাধ্যমে আপনাকে সেটার রুপ দিতে হবে। নিচের ছবি টা দেখুনঃ
আমরা html এর মাধ্যমে এটাকে কিভাবে তৈরি করবো। এটা আপনাকে চিন্তা করতে হবে। পিসিতে বশে যে কাজ তাই করবেন সেটাকে html এর মাধ্যমে রুপ দেবার চেষ্টা করতে হবে। নিচের ছবিতাকে আমি কিভাবে এইচটিএমএল এ রুপান্তর করলাম টা দেখেনঃ
<DOCTYPE html>
<head>
</head>
<title>Some movie of my best</title>
<body>
<table border="5" table width="1200">
<tr>
<td align="center" > <b><em>"DON 2"<br/> The osam movie . If you miss it, you have a great miss. MIND IT "<em></b></td>
</tr>
</table>
<table border="3" table width="1200">
<tr align="right">
<td width="300"><em><b>"THE DIRTY Picture"<br/></em></b> is also a top movie, It noticed a real life of a insolvent girl.
</td>
<td ><b><em>"JON carter"</b></em> is a osam movie, I like it very much. I think you also like it.
</td>
<td ><b><em>"Harry porter"</b></em> The megic osam movie of world, I like it very much. Have you seen the latent <em><b>"Harry porter, the daoly hallows 2"</em></b>.
</td>
<td ><b><em>"Shadows of time"</b></em> is a orginal love movie, this indian bangla movie is my best love movie.
</td>
</tr>
</table>
</body>
</html>
কোড টা কপি করে আপনি এইচটিএমএল হিসাবে সেভ করে দেখেন।
এটা table এর ব্যাবহার । table এর আরেকটা ব্যাবহার দেখুনঃ
এটা কিভাবে তৈরি করবেন তা জানার জন্য নিচের কোড গুলা দেখেন।
<!DOCTYPE html>
<head>
</head>
<title>Welcome to picture</title>
<body>
<h1>Some osam picture collection by JEMEE</h1>
<p><strong><em>Jemee's best collection picture</strong></em></p>
<meta content="picture, osam picture, yoga picture, love collection"/>
<table border="8" table height="200">
<tr>
<td>
<img src="fdfd.jpg" height="200"/></td>
<td><img src="Jme0141.jpg" height="200"/></td>
<td><img src="jemee.jpg" height="200"/></td>
<td><img src="Jme0296.jpg" height="200"/></td>
<td><img src="Jme0119.jpg" height="200"/></td>
<td><img src="JME0219.jpg" height="200"/>
</td>
</table>
<table border="4" table height="400"
</tr>
<tr>
<td>
<img src="j.jpg" height="100"/>
</td>
<td>
<img src="j(1).jpg" height="100"/>
</td>
<td>
<img src="j (2).jpg" height="100"/>
</td>
<td>
<img src="j (4).jpg" height="100"/>
</td>
<td>
<img src="j (5).jpg" height="100"/>
</td>
<td>
<img src="j (6).jpg" height="100"/>
</td>
<td>
<img src="j (7).jpg" height="100"/>
</td>
<td>
<img src="j (8).jpg" height="100"/>
</td>
<td>
<img src="j (9).jpg" height="100"/>
</td>
</tr>
<tr>
<td>
<img src="j (10).jpg" height="100"/>
</td>
<td>
<img src="j (11).jpg" height="100"/>
</td>
<td>
<img src="j (12).jpg" height="100"/>
</td>
<td>
<img src="j (13).jpg" height="100"/>
</td>
<td>
<img src="j (14).jpg" height="100"/>
</td>
<td>
<img src="j (15).jpg" height="100"/>
</td>
<td>
<img src="j (16).jpg" height="100"/>
</td>
<td>
<img src="j (17).jpg" height="100"/>
</td>
<td>
<img src="j (18).jpg" height="100"/>
</td>
</tr>
<tr>
<td>
<img src="j (19).jpg" height="100"/>
</td>
<td>
<img src="j (20).jpg" height="100"/>
</td>
<td>
<img src="j (21).jpg" height="100"/>
</td>
<td>
<img src="j (22).jpg" height="100"/>
</td>
<td>
<img src="j (23).jpg" height="100"/>
</td>
<td>
<img src="j (24).jpg" height="100"/>
</td>
<td>
<img src="j (25).jpg" height="100"/>
</td>
<td>
<img src="j (27).jpg" height="100"/>
</td>
<td>
<img src="m (1).jpg" height="100"/>
</td>
</tr>
<tr>
<td>
<img src="m.jpg" height="100"/>
</td>
<td>
<img src="m (2).jpg" height="100"/>
</td>
<td>
<img src="m (3).jpg" height="100"/>
</td>
<td>
<img src="m (4).jpg" height="100"/>
</td>
<td>
<img src="m (5).jpg" height="100"/>
</td>
<td>
<img src="m (6).jpg" height="100"/>
</td>
<td>
<img src="m (7).jpg" height="100"/>
</td>
<td>
<img src="m (8).jpg" height="100"/>
</td>
<td>
<img src="m (9).jpg" height="100"/>
</td>
</tr>
</table>
</body>
</html>
এখন লক্ষ করুন <td> এর ভিতর যে <img src="j (15).jpg" কোড লেখা হয়েছে এক জাইগাতে আবার আরেক জাইগাতে আলাদা । এটা হল ছবি গুলা কিন্তু আমার পিসি তে আছে তাদের নাম গুলা জাস্ট উল্লেখ করেছি image ট্যাগ এর মাদ্ধমে। আরেকটা কথা এভাবে যদি আপনি image এর table তৈরি করতে চান তাহলে এইচটিএমএল ফাইল ও ছবিগুলাকে একই ডিরেক্টরি তে রাখবেন।
। w3school ও webcoachbd পরার পর আপনি নিজে নিজে নিজের মত ডিজাইন তৈরি করুন আর আনন্দ লাভ করুন। আমি তো এইচটিএমএল শিখতেই খুব মজা পাচ্ছি। সিএসএস এ হাত দেব ২ থেক ৪ দিনের মাঝে। দেখি ওইখানে কি আছে। এই টিউন টার প্রধান উদ্দেশ্য হল আপনারা যারা যেই কাজটাই করতে চান না কেন, শুধু মনোযোগ দিয়া করবেন। আর নিজের উপর আস্থা রাখবেন। মনে রাখবেন যারা বর্তমানে সফল ওয়েব ডিজাইনার তারা মানুষ এবং আপনিও মানুষ তাই এটা আপনার দ্বারাও সম্ভব।
অনেক বকর বকর আর আজাইরা কথা কইলাম তাই না।কেমন লাগলো আমার এই আজাইরা কথাগুলা টা কমেন্ট করে জানান। দয়া করে গালি দিয়েন না বেশি। আমি এরকমি , তাই এখন বিদায় নেব। সবাই আবার ভাল থাকবেন। এই প্রত্যাশায় আমি জেমী।
আমি আছি ফেসবুকেঃ http://www.facebook.com/mathafutajemee
আমি jemeeroy। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 10 টি টিউন ও 42 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আপনার ফাইল তো ডিলেট করে দিয়েছে। দয়া করে আবার আপলোড করুন। সুন্দর টিউন। ধন্যবাদ আপনাকে। এইরকম আরো কিছু চাই।
ওস্তাদ, গরম গরম ডাউনলোডাইতে গিয়া দেখি ফাইল ডিলিট কইরা দিছে,
তাড়াতাড়ি নতুন কইরা আপলোড করেন, আর ধৈর্য রাখতে পারতেছি না।
ধন্যবাদ আপনাগো । @অবদান ভাই লোড সেডিং এর জন্য মাথা ঠিক নাই । তাই প্রোয়োজনিয় হেড আর বডি টেগ এর কথা মনে আসে নাই । শেষ করতে পারলে বাচি এই দশাতে ছিলাম ।
.
@তোহা ভাইজান আমরা তো হগলে হগলের ফেন্ড ।
আজকে আবার আপলোড করে দিমু ।
শিখতে হলে আসলেই আগ্রহ প্রয়োজন। আর একটা জিনিশ অনেক বেশি প্রয়োজন, সেটা হল ধৈর্য।
আমি নিজে ধৈর্য ও আগ্রহ নিয়ে SEO শিখতাছি।
হ ভাই @সার্চ ইন্জিন । আমিও সিখতাছি এস ই ও । অন পেজ , ওফ পেজ , ডু ফলো , নো ফলো , মেটাট্যাগ এগুলা কেবল বুঝতে পারছি । তবে আমার মনে হচ্ছে এস ই ও হলো সুক্ষ্ম চিন্তা ভাবনার কাজ । মাথা ঘামাতে হয় অনেক । @search engine.
ভাই আপনি মাশাআল্লাহ অনেক এগিয়ে গেছেন। আমাদের জন্য দোয়া কইরেন। আসলে ভাল একজন বন্ধু পাইলে অনেক দূর আগানো যায়। আপনার কপাল ভাল যে কিছু জানাশুনা ভাল বন্ধু পাইছেন।ধন্যবাদ।
অহ । পারলাম না ডাউনলোড ঠিক করতে তাই, তাই সরাসরি কোড লিখে দিলাম। এবং নিচে কোডের আসল জিনিসটা বলে দিলাম। সবাইকে ধন্যবাদ । আপনাদের ভালবেসে আবার আবার আসব এবং সারাজীবন আসার চেষ্টা করব।
আমি এইচটিএমএল আর সিএসএস শেখার পর পিএইচপি শেখা শুরু করেছি। এতদিন অনেক মজা করে শিখলেও এখন ক্লান্ত হয়ে পরেছি। কিন্তু চেষ্টা চলছে।
ভালো কইছেন। এগিয়ে যান আপনার রাস্তায়।