সহজ ভাষায় Html টিউটোরিয়াল পর্ব (৩)


আজকে আবার টিউন নিয়ে হাজির হলাম সবাই কেমন আছেন? আশা করি খুবই ভাল আছেন আজকে আপনাদের জন্য HTML এর একটি পর্ব নিয়ে হাজির হয়েছি যাতে দেখাব কিভাবে এইচটিএমএল দিয়ে কিভাবে পেইজে ছবি অ্যাড করতে হয় এবং কিভাবে কোন একটি সাইটের সাথে লিংক আপ করতে হয় এবং  অর্থাৎ Hyperlink কিভাবে তৈরী করতে হয় এবং কিভাবে দুইটি লাইনের মাঝে স্পেস রাখতে হয় তা দেখাব চলুন তাহলে শুরু করা যাক..


প্রথমে আপনার পিসিতে নোডপেড অন করে নিচের কোড গুলো এখান থেকে কপি করে নোড পেডে পেস্ট করুন এর পর এটিকে  New webpage.html নামে সেভ করুন


<html>
<body>
<p align="center"><b><font size="5"color="blue">This is My First Web Page</b></p></font>
Welcome to my site <hr><br/>
<img align="left"src="ss.jpg">
Automatically update this list from the Web
Microsoft Office Online featured links are your source of up-to-date information from Microsoft Office Online to help you increase your productivity with Office and provide you with the answers to questions frequently asked about Office. Microsoft is constantly responding to customer feedback, and these featured links are the best way to get new and updated information about Office from within your Office program. You have turned on an option that will periodically download a list of hyperlinks from Microsoft Office Online to your computer's hard disk. Periodically, your Office program will access information from Microsoft Office Online when you are connected to the Internet, without interrupting your work, to display a new list of these links.

Turn off the display of these links
On the Help menu, click Microsoft <Program Name> Help to display the <Program Name> Help task pane.
 Under See also in the task pane, click Online Content Settings.
In the Service Options dialog box, clear the Show Microsoft Office Online featured links check box.
<a href="http://www.google.com">Google<a/>
</body>
</html>



তারপর দেখতে ছবিটি নিচের মত দেখাবে আর বিশেষ করে ছবি নির্বাচন করার সময় ছোট সাইজের ছবি নির্বাচন করবেন না হয় ছবি সম্পূর্ন পেইজ দখল করে রাখবে .


উপরের ছবিটির কোড গুলো ভাল করে খেয়াল করুন দুই জায়গায় ইমেইজ গুলোর নাম চেইঞ্জ করতে হবে অর্থাৎ যেই পেইজে সেট করবেন তার নাম উল্লেখ করে দিতে হবে
এইবার চলুন এটা সম্বন্ধে কিছু জানি
উপরের কোড সমূহের মধ্যে <img align="left"src="ss.jpg"> এই কোডটি  </body> এর আগে আছে ভাল করে খেয়াল করলে দেখতে পাবেন আমি দিয়ে দিয়ে দিয়েছি এইখানে ss.jpg টি হল ছবির নাম এবং align="left" এর মানে হল ছবিটি বাম পাশে অবস্থান করবে আর src টি দেয়া হয়েছে ছবি সার্চ  করার জন্য  এইবার ছবিটিকে যদি বামপাশে না বসিয়ে উপরে মাঝখানে  বসাতে চান তাহলে নিচের কোডের align="left" এর জায়গায় align="Center" বসাতে হবে একিভাবে আমরা যদি কোন gif image বসাতে চাই তাহলে কোডটির মাঝে .jpg এর জায়গায় .gif বসিয়ে দিতে হবে আর বিশেষ করে একটি রুট ফোল্ডার(যে কোন একটি ফোল্ডার যেটিতে ওয়েভ পেইজের সব গুলো ফাইল থাকবে) তৈরী করে সেইখানে  Html ফাইলটি এবং যেই ছবিগুলো পেইজে ইমেইজ হিসেবে সেট করবেন সবগুলো ছবি সেইখানে রাখতে হবে আর এইখানে <hr> এর পর <br/> এটি দেয়া হয়েছে দুইটি লাইনের মাঝে স্পেস তথা ফাঁকা জায়গা তৈরী করা জন্য স্পেস দিতে না চাইলে এই অংশ কেটে দিন  এবং সব গুলো কোডের মধ্যে হতে </body> উপরে এই কোডটি
<a href="http://www.google.com">Google<a/> গুগল পেইজের সাথে লিংক তৈরী করার জন্য দেয়া হয়েছে আপনার যদি অন্য কোন পেইজের লিংক দিতে চান তাহলে http://www.google.com এটি পরিবর্তন করে আপনার ইচ্ছামত লিংক দিন এবং Google লেখাটির জায়গায় পেইজের নামটি লিখুন এইখানে href এর অর্থ বুঝানো হয়েছে Hypertext Reference পেইজের যে কোন ধরনের লিংক বিল্ডআপ করতে এটি লিখতে হবে..আর সর্বশেষে  যে কখাটি মনে করিয়ে দিচ্ছি সেটা হল আমি উপরে কোড গুলো দিয়েছি তার মাঝে সবুজ রং এর ব্যাকগ্রাউন্ড কালার দিয়ে সিলেক্ট করা লেখা গুলো অর্থাৎAutomatically update this list from the Web  হতে check box.  পর্যন্ত লেখাটি আপনার ইচ্ছামত চেইঞ্জ করতে পারবেন...

কেমন লেগেছে তা কমেন্ট করে জানাবেন...
আজকে এইটুকুতে থাক সবাই ভাল থাকুন সুস্থ থাকুন এই কামনায় শেষ করছি ......আল্লাহ হাফেজ...

Safiul Hasan Rejvi

আমি একজন সাধারণ মানুষ ...সাধারণ মানুষ হিসেবে থাকতে চাই সব সময়........

2 Comments

Previous Post Next Post