আশা করি ভাল আছেন সবাই। ৪র্থ পর্বে আজ আমরা শিখব লিস্ট,ছবি এবং লিঙ্ক এর ব্যাবহার। এই জিনিস গুল ওয়েব এর প্রান বলা যায় কারন ওয়েব পেজ এর মেনু বানাতে লিস্ট লাগে আর ইমেজ এবং লিঙ্ক ছাড়া ত ওয়েব সাইট ই কল্পনা করা যায় না।
তবে চলুন আর কথা না বাড়িয়ে কাজে নেমে পড়ি।
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট। অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
নিচের উধারন টা দেখলে ক্লিয়ার হতে পারবেন,
<html> <head> <title> www.techtunes.io</title> </head> <body> <h4>Disc Type list</h4> <ul type="disc"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> <h4>Circle Type list</h4> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul><h4>Square Type list</h4> <ul type="square"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ul> </body> </html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,
আরেক টি উধাহরন দেখেন,
<html> <head> <title> www.techtunes.io</title> </head> <body> <h3>Alphabet Type list</h3> <ol type="A"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ol> <h3>Number Type list</h3> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> <h3>Roman Number Type list</h3> <ol type="I"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ol> </body> </html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,
মনে হয় আর কোন সমস্যা নেই।
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়। যেমন <a href="http://www. techtunes.io/"> www. techtunes.io </a> । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href="…………….. " এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href=" ">…………………..</a> এর মধ্যে লেখতে হবে।
এখানে দেখলে বাকিটা বুঝতে পারবেন,
<html> <head> <title> www. techtunes.io </title> </head> <body> <a href="https://www.techtunes.io"> click here 4 techtunes</a> <br /> <a href="mailto:[email protected]"> [email protected]</a> </body> </html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।
ইমেজ সেট করতে হলে কিছু পূর্ব প্রস্তুতি নিতে হয়।
যেমন, ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
মনে রাখতে হবে যে যেই ফোল্ডার থেকে ইমেজ নেয়া হয়েছে সেখানেই index ফাইল টা রাখতে হবে।
এখানে একটু খেয়াল করেন,
<html> <head> <title> www.techtunes.io</title> </head> <body> <h3> This is an example of image.</h3> <img src="pic.png"> </body> </html>
একটা Notepad Open করে উপরের Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করতে হবে। এরপর save করা index.html ফাইলটিকে webpage folder এর মধ্যে রাখতে হবে। এখন Mozilla Firefox দিয়ে index.html open করলে ছবির মত দেখাবে।
ভালবাবে খেয়াল করুন,
আজ আর নয়। আগামী পর্বে আবার আসব। আজকের মত বিদায়।
>>>>>> html কতটুকু শিখতে পারলেন তা কমেন্ট এ যানাবেন।।<<<<<<<<<<<
আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
প্রিয় টিউনার,
আপনার টিউনটি টেকটিউনস চেইন টিউন হিসেবে অন্তর্ভুক্ত করা হয়েছে। অভিনন্দন আপনাকে!
টেকটিউনসে চেইন টিউন কীভাবে প্রক্রিয়া হয় তা জানতে টেকটিউনস সজিপ্র এর https://www.techtunes.io/faq “চেইন টিউন” অংশ দেখুন।
নিয়মিত চেইন টিউন করুন। এখন থেকে আপনার নতুন করা চেইন টিউন গুলো টেকটিউনস থেকে চেইন এ যুক্ত করা হবে। চেইন টিউনে যুক্ত হবার ফলে চেইনের প্রতিটি পর্ব একসাথে থাকবে।
চেইনে নতুন পর্ব যুক্ত হলে তা টেকটিউনসের প্রথম পাতায় দেখা যাবে এবং “সকল চেইন টিউনস” https://www.techtunes.io/chain-tunes/ পাতায় চেইন টিউনটি যুক্ত হবে।
নিয়মিত চেইন টিউন করে নতুন নতুন টিউন আপনার চেইনে যুক্ত করুন এবং অসম্পূর্ণ না রেখে আপনার চেইন টিউনে নিয়মিত পূর্ণাঙ্গ রূপ দিন। ধন্যবাদ আপনাকে।
আপনার টিউন যেহেতু প্রোগ্রামিং সংক্রান্ত টিউন ও টিউনে কোডের ব্যবহার রয়েছে তাই বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড যেমন HTML, CSS, JS, PHP ইত্যাদি কোড সুন্দর ও সঠিক ভাবে দেখাতে টেকটিউনসের রয়েছে নিজেস্ব “কোড হাইলাইটার”। টেকটিউনসের “কোড হাইলাইটার” কিভাবে ব্যবহার করতে হয় তা জানতে এই https://www.techtunes.io/web-design/tune-id/77692/ টিউনটি দেখুন।
মেতে থাকুন প্রযুক্তির সুরে আর নিয়মিত করুন চেইন টিউন!
ভাই আমার Wapka সাইটে Recently Added এ
উদাহরন Aiyyaa (2012)
All 128KBPS Songs!
New Bollywood
Videos Updated!
3GP!~MP4!
Ajab Gazabb Love (2012)
All 128KBPS Songs!
Jugaad (Kismet Love Paisa Dilli), Dreamum Wakeuppam (Aiyyaa)!
3GP!~MP4!
Ishkq in Paris (2012)
All 128KBPS Songs!
Kismet Love Paisa Dilli (2012)
All 128KBPS Songs!
[More …] এ গুলো কিভাবে যুক্ত করব । দয়া করে আমাকে সাহায্য করুন
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৯] :: ডিভ (div) এর ব্যাবহার।।](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/151902/chaintune_html-css-js-and-php-tranning-center.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৯] :: ডিভ (div) এর ব্যাবহার।।")
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/149350/chaintune_html-css-js-and-php-tranning-center.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার")
very nice tune thanks